/* ============================================================
   «Мої рахунки».

   Кольори беремо тільки змінними (--up / --down / --line / --card):
   тем у журналі девʼять, і жоден колір тут не прописаний руками —
   інакше розділ виглядав би чужим у восьми з них.

   Колір несе лише результат: баланс, просадка, стан рахунку. Решта —
   сірі відтінки, як і в решті журналу. Стан рахунку при цьому завжди
   підписаний словом: на самий лише колір покладатись не можна.
   ============================================================ */

/* Набір той самий, що в «Огляді» (.ovw у style.css): це дві вкладки одного
   розділу, і поки в них був різний кегль із накресленням, текст мінявся на
   очах при кожному переході між ними. Ширина теж мусить збігатись: .ovw
   своєї верхньої межі не задає й бере всю .page (до 1320px) — і .acw за
   нею не гнався, тому «Рахунки» виходили вужчими й перемикач у шапці
   смикався вбік при кожному переході. Свого max-width тут більше нема. */
.acw{font-size:14px; line-height:1.6; font-weight:300}
/* Розкладку задає спільна .ohead — щоб заголовок і перемикач стояли
   там само, де в «Огляді». Тут лишається тільки те, чого там немає. */
.ac-new{margin-left:auto}

/* Алокація біля заголовка: скільки грошей під управлінням. Гола цифра,
   без підпису — тут була тиха виноска «живих рахунків: 1  $10 851»
   дрібним сірим, за кеглем підпис до чогось іншого, хоч це й число,
   яке звіряють найчастіше. Тепер воно читається з відстані. */
.ac-alloc{min-width:0; font-family:var(--mono); font-size:20px; font-weight:500;
  letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}

/* ---------------- сітка карток ---------------- */
/* Скільки колонок — вирішує 330: стільки треба картці, щоб підписи цифр
   не обрізались. Стеля картки окремим правилом, а не другим числом у
   minmax: з definite-максимумом браузер рахує колонки саме по ньому, і
   на ноутбуці замість трьох колонок виходило дві.

   auto-fit, а не auto-fill: у кого рахунків два, порожня колонка
   сплющується, і картки не тиснуться до лівого краю з дірою праворуч. */
.ac-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:var(--stack)}
/* Колонки однакові й ідуть зліва підряд (auto-fill), картка займає свою
   колонку цілком. Було auto-fit і стеля картки 430px: колонки розтягувались
   на всю ширину, а картки ні — і при двох рахунках між ними зяяла діра на
   пів екрана (18.09.2026, власник: «відступ до Марса»). Картки в ряду
   однакової висоти, низ картки — по нижньому краю. */
.ac-grid > .shell{margin-bottom:0; display:flex; flex-direction:column}
.ac-grid > .shell > .ac-card{flex:1}
.ac-grid .ac-card > .ac-foot{margin-top:auto}
/* У темній темі сусідні картки розсуває .shell+.shell (style.css). У сітці
   це зсувало вниз усі картки, крім першої, — відступ тут дає сама сітка.
   Селектор такої ж ваги, як те правило, а файл іде пізніше — тож перемагає
   він, а саме правило лишається як було. */
:root .ac-grid > .shell + .shell{margin-top:0}
.ac-card{padding:18px 20px 14px; display:flex; flex-direction:column; gap:14px}
/* Світло на картці йде за курсором — як на картках вікна «Нова сесія».
   Шар під вмістом картки (z-index:-1 всередині isolation), --mx/--my
   ставить accounts.js. Картки журналів і сесій бектесту — одні й ті ж.
   Поки лише в тих, кому відкрита нова перемотка (клас bt-plus, app.js). */
:root.bt-plus .ac-card{position:relative; isolation:isolate}
:root.bt-plus .ac-card::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%)}
:root.bt-plus .ac-card:hover::before{opacity:1}
@media(hover:none){ .ac-card::before{display:none} }

.ac-top{display:flex; align-items:flex-start; gap:12px}
/* Значок проп-фірми біля назви. Логотипи приходять зі своїм фоном —
   чорним, білим, синім, — тож плитка зі скругленням читається як іконка
   застосунку, а не як картинка, що випала з макета. Тонка рамка тримає
   межу там, де фон логотипа збігається з фоном картки. */
.ac-logo{flex:none; width:54px; height:54px; border-radius:13px;
  object-fit:cover; border:1px solid var(--line); background:var(--panel-2)}
.ac-name{min-width:0}
.ac-name b{font-size:16px; font-weight:600; letter-spacing:-.01em}
.ac-sub{margin-top:3px; color:var(--faint); font-size:12px}

/* стан рахунку: слово плюс колір, ніколи не колір сам по собі */
.ac-st{flex:none; margin-left:auto; border:1px solid var(--line); border-radius:20px;
  padding:4px 11px; font-size:11.5px; color:var(--dim); white-space:nowrap}
.ac-st.pass{color:var(--up); border-color:var(--up); background:var(--up-soft)}
.ac-st.fail{color:var(--down); border-color:var(--down); background:var(--down-soft)}
.ac-st.shut{color:var(--faint)}
/* Пройдений челендж: зелена рамка з легким сяйвом, згори — смуга-перемога. */
.shell:has(> .ac-card.pass){border-color:color-mix(in srgb,var(--up) 45%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--up) 22%,transparent),var(--shell-bg) 55%);
  box-shadow:0 10px 34px -16px color-mix(in srgb,var(--up) 55%,transparent)}
.ac-card.pass{border-color:color-mix(in srgb,var(--up) 35%,transparent);
  background:radial-gradient(120% 70% at 100% 0%,var(--up-soft),transparent 60%),var(--card)}
.ac-win{position:relative; overflow:hidden; display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:13px; color:var(--up);
  background:linear-gradient(100deg,color-mix(in srgb,var(--up) 18%,transparent),color-mix(in srgb,var(--up) 6%,transparent));
  border:1px solid color-mix(in srgb,var(--up) 40%,transparent)}
.ac-win::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-100%); animation:acShine 4.5s ease-in-out 1s infinite}
@keyframes acShine{0%{transform:translateX(-100%)} 30%,100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.ac-win::after{animation:none; display:none}}
.ac-cup{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:var(--up); color:var(--card); box-shadow:0 4px 14px -4px var(--up)}
.ac-win-t{min-width:0; display:flex; flex-direction:column; gap:2px}
.ac-win-t b{font-size:14.5px; font-weight:650; letter-spacing:-.01em}
.ac-win-t i{font-style:normal; font-size:12px; color:var(--dim)}
.ac-win-ok{margin-left:auto; flex:none; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; font-weight:700;
  border:1.5px solid var(--up); color:var(--up)}

/* Злитий: червона рамка без сяйва, картка притишена, логотип сірий —
   рахунок уже не робочий інструмент, але й не ховається. */
.shell:has(> .ac-card.fail){border-color:color-mix(in srgb,var(--down) 35%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--down) 14%,transparent),var(--shell-bg) 55%)}
.ac-card.fail{border-color:color-mix(in srgb,var(--down) 28%,transparent);
  background:radial-gradient(120% 70% at 100% 0%,var(--down-soft),transparent 60%),var(--card)}
.ac-card.fail .ac-logo{filter:grayscale(1); opacity:.6}
.ac-card.fail .ac-bal .big{color:var(--dim)}
.ac-win.lose{color:var(--down);
  background:linear-gradient(100deg,color-mix(in srgb,var(--down) 15%,transparent),color-mix(in srgb,var(--down) 4%,transparent));
  border:1px dashed color-mix(in srgb,var(--down) 45%,transparent)}
.ac-win.lose::after{display:none}
.ac-win.lose .ac-cup{background:var(--down); box-shadow:0 4px 14px -4px var(--down)}
.ac-win.lose .ac-win-ok{border-color:var(--down); color:var(--down)}
.ac-win-t i.why{color:var(--text); opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------------- баланс ---------------- */
.ac-bal .big{font-family:var(--mono); font-size:30px; font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.1}
.ac-bal .big.up{color:var(--up)}
.ac-bal .big.down{color:var(--down)}
.ac-from{margin-top:4px; color:var(--faint); font-size:11.5px; font-family:var(--mono)}
.ac-nomoney{margin-top:6px; color:var(--faint); font-size:12px; line-height:1.5}

/* ---------------- крива капіталу ---------------- */
.ac-spark{display:block; width:100%; height:40px}
.ac-spark polyline{fill:none; stroke:var(--dim); stroke-width:1.6;
  vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.ac-spark polyline.up{stroke:var(--up)}
.ac-spark polyline.down{stroke:var(--down)}
.ac-spark .z{stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke}
.ac-spark.flat .z{stroke-dasharray:4 5}

/* ---------------- смужки «скільки з чого» ---------------- */
/* Середина картки: крива зверху, ліміти знизу, вільне місце — між ними.
   Так нижня смужка ліміту, плитки й підвал у сусідніх картках лягають на
   одну лінію, хоч би скільки лімітів було задано в кожній. */
.ac-mid{flex:1 1 auto; display:flex; flex-direction:column; gap:14px}
/* Крива разом зі смужками притиснута до низу, а не до балансу: вільне
   місце — над ними, і крива читається як частина блоку лімітів. */
.ac-mid > :first-child{margin-top:auto}
/* Без лімітів — кільце цілі на місяць, підказка «задати ліміти» — внизу. */
.ac-goal{display:flex; align-items:center; gap:16px}
.ac-ring{width:86px; height:86px; flex:none}
.ac-ring circle{fill:none; stroke-width:7}
.ac-ring .bg{stroke:var(--line)}
.ac-ring .on{stroke:var(--up); stroke-linecap:round}
.ac-ring text{font-family:var(--mono); font-size:15px; fill:var(--text)}
.ac-goal-t{display:block; text-align:left; background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer}
.ac-goal-t .t{font-size:12px; color:var(--faint)}
.ac-goal-t .v{font-family:var(--mono); font-size:20px; font-weight:500; margin:4px 0 3px}
.ac-goal-t .v.up{color:var(--up)} .ac-goal-t .v.down{color:var(--down)}
.ac-goal-t .v span{font-size:13px; color:var(--faint)}
.ac-goal-set{margin-top:9px}
.ac-rules{color:var(--faint); font-size:12px; line-height:1.5}
/* Порожня середина (ні угод, ні лімітів) не повинна додавати ще один
   проміжок — gap картки вже стоїть з обох боків від неї. */
.ac-mid:empty{margin-bottom:-14px}
.ac-bars{display:flex; flex-direction:column; gap:9px}
.ac-bul-h{display:flex; align-items:baseline; gap:8px; font-size:11.5px; color:var(--faint)}
.ac-bul-h b{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--dim);
  font-weight:600;
  font-variant-numeric:tabular-nums}
.ac-bul-t{margin-top:4px; height:5px; border-radius:3px; background:var(--bar-track); overflow:hidden}
.ac-bul-t i{display:block; height:100%; border-radius:3px; background:var(--bar-fill);
  transition:width .25s var(--ease)}
.ac-bul-t i.up{background:var(--up)}
.ac-bul-t i.down{background:var(--down)}
/* близько до межі — підпис теж змінює колір, не лише смужка */
.ac-bul.hot .ac-bul-h b{color:var(--down)}
.ac-bul.done .ac-bul-h b{color:var(--up)}

/* ---------------- цифри рахунку ---------------- */
/* Двома рядами по дві, а не чотирма в ряд: у чотирьох колонках картки
   підписи «середній RR» і «просадка від піку» обрізались трьома крапками
   на будь-якому екрані, де картка вужча за 490 пікселів — тобто майже
   завжди. Краще зайвий ряд, ніж підпис, який доводиться вгадувати. */
.ac-cells{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line-soft); margin-top:2px}
.ac-cell{padding:10px 10px 4px; border-right:1px solid var(--line-soft); min-width:0}
.ac-cell:nth-child(2n){border-right:none}
.ac-cell:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
.ac-cell .l{font-family:var(--mono); font-size:8.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.ac-cell .v{margin-top:3px; font-family:var(--mono); font-size:15px; font-weight:500;
  font-variant-numeric:tabular-nums}

.ac-foot{display:flex; align-items:center; gap:10px; margin-top:auto;
  border-top:1px solid var(--line-soft); padding-top:8px}
.ac-foot .sp{flex:1}

/* Текстова кнопка. Висота разом із відступами тримається 44px — на
   телефоні в неї треба потрапляти пальцем. */
.ac-link{background:none; border:0; color:var(--dim); font-size:13px; cursor:pointer;
  padding:11px 6px; border-radius:var(--r-sm); transition:.16s}
.ac-link:hover{color:var(--text)}
/* Головна дія картки — кольором акценту, щоб її було видно без наведення. */
.ac-link.stat{color:var(--accent); margin-left:-6px}
.ac-link.stat:hover{background:var(--accent-soft)}

/* ---------------- порожній розділ ---------------- */
.ac-empty{text-align:center; padding:34px 26px}
.ac-empty p{margin:0 0 8px; font-size:15px}
.ac-empty .btn{margin-top:14px}

/* ---------------- форма ---------------- */
/* Форма висока: фірма, тип, три числа, назва, три ліміти, дати й нотатка.
   На ноутбуці вона не вміщується у вікно, тому гортається всередині, а
   шапка з кнопками лишаються на місці — так само, як у формі угоди. */
.modal-box:has(.ac-form){max-width:620px; max-height:88vh;
  display:flex; flex-direction:column}
.modal-box:has(.ac-form) .m-head, .modal-box:has(.ac-form) .m-foot{flex:none}
/* Місце під смужку прокрутки тримаємо завжди. «Свої умови» додають
   три ряди полів, вікно впирається в свої 88vh — і смужка з'являлась
   разом із ними, зсуваючи всю форму вбік. Там, де смужка накладна
   (macOS, телефони), це нічого не займає. */
.modal-box:has(.ac-form) .ac-form{flex:1; overflow-y:auto; min-height:0;
  overscroll-behavior:contain; scrollbar-gutter:stable}
.modal-box:has(.ac-form) .ac-form > *{flex:none}
.ac-form{display:flex; flex-direction:column; gap:12px}
.ac-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ac-row3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
/* Дата й стан: даті вистачає вузької колонки, а станам потрібна ширша —
   інакше «Закритий» зривається на власний рядок під рештою. */
.ac-row-st{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.ac-f{display:block; min-width:0}
/* Підпис поля. Приписка збоку — тихіша за сам підпис: вона уточнює, а не
   називає. Раніше на її місці був абзац під полем; два слова поруч із
   назвою читаються з одного погляду, а абзац доводилось саме читати. */
.ac-f > span{display:flex; align-items:baseline; gap:7px; font-size:12px;
  color:var(--faint); margin-bottom:5px}
.ac-f > span i{font-style:normal; font-size:11px; color:var(--faint); opacity:.62}
/* Приписка, яка попереджає (джерело цін лежить), говорить голосніше. */
.ac-f > span i.warn{color:var(--down); opacity:1}

/* Валюта — три літери, повна третина рядка їй ні до чого. */
.ac-money{grid-template-columns:1fr 1fr 92px}
.ac-in{width:100%; min-height:44px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel-2); color:var(--text); padding:10px 12px; font:inherit; font-size:15px}
.ac-in:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.ac-hint{margin:-4px 0 0; color:var(--faint); font-size:12px; line-height:1.5}
.ac-err{margin:0; color:var(--down); font-size:13px}
/* Не помилка, а попередження: рахунок збережеться, просто під іншою
   назвою. Тому колір не червоний — це стан справ, а не перешкода. */
.ac-warn{margin:6px 0 0; color:var(--faint); font-size:12px; line-height:1.5}

/* Поле фірми зі списком. Стрілка праворуч каже, що є з чого вибрати, і
   при цьому не заважає вписати своє: поле лишається звичайним текстовим.
   Сам список — .spop зі style.css, спільний з фільтрами журналу. */
.ac-combo-in{position:relative; display:block}
.ac-combo-in .ac-in{padding-right:38px}
.ac-combo-x{position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center; border:0;
  background:none; color:var(--faint); cursor:pointer; border-radius:8px;
  transition:color .16s, transform .18s var(--ease)}
.ac-combo-x:hover{color:var(--text)}
/* стрілка перевертається, поки список відкритий */
.ac-combo-in[aria-expanded="true"] .ac-combo-x{color:var(--text);
  transform:translateY(-50%) rotate(180deg)}

/* Кнопка дати виглядає як поле вводу, бо нею й є: рідний календар
   браузера не піддається оформленню, тож дату обирає свій DatePicker.
   Порожня дата підписана словами, а не сірим «дд.мм.гггг». */
.ac-date{display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer}
.ac-date > span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.ac-date svg{flex:none; color:var(--faint)}
.ac-date:hover{border-color:var(--faint)}
.ac-date:hover svg{color:var(--dim)}
/* дата ще не обрана — підпис тихіший за справжнє значення */
.ac-date:not([data-set]) > span{color:var(--faint)}

/* Тиха приписка внизу картки: чого в підрахунку немає і чому. */
.ac-note{margin:10px 0 0; color:var(--faint); font-size:11.5px; line-height:1.45}

/* Підказки під полем: назви рахунків з угод і ходові проп-фірми.
   Дрібніші за перемикачі — це не вибір із закритого списку, а швидкий
   спосіб не набирати руками. Саме поле лишається звичайним текстовим. */
.ac-picks{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.ac-pick{border:1px solid var(--line); background:var(--panel-2); color:var(--dim);
  border-radius:20px; padding:6px 11px; font-size:12px; line-height:1.2;
  cursor:pointer; transition:.16s; white-space:nowrap}
.ac-pick:hover{color:var(--text); border-color:var(--faint)}
.ac-pick.on{background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink,#fff); font-weight:500}

.ac-seg{display:flex; gap:6px; flex-wrap:wrap}
.ac-seg button{flex:1 1 auto; min-height:44px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--dim); border-radius:var(--r-sm); padding:10px 12px;
  font-size:13.5px; cursor:pointer; transition:.16s}
.ac-seg button:hover{color:var(--text); border-color:var(--faint)}
.ac-seg button.on{background:var(--text); border-color:var(--text); color:var(--bg); font-weight:500}

/* ─────────── Вікно старту прогону бектесту ───────────
   Те саме вікно, що на екрані прогону (replay-start.js), але відкрите з
   картки «Бектест» у журналі: там воно збирається з класів цієї форми,
   тож і власні його класи мусять бути тут. Вид один на два місця —
   стилі в replay.css і тут мають лишатись однаковими.

   Крок 1 — три картки режиму; крок 2 — звичайна форма. */
/* Підписи полів у вікні старту стоять помітніше, ніж у решті форм: тут
   їх усього три на крок, і кожен — окреме рішення, а не рядок анкети.
   Правило звужене до вікна, щоб форми журналу лишились як були. */
/* Вікно старту з'являється як діалоги журналу: підкладка проявляється,
   коробка підіймається на місце. Клас «in» ставить replay-start.js на
   наступному кадрі після показу. */
#runModal{opacity:0; transition:opacity .18s}
#runModal.in{opacity:1}
/* Смужка прокрутки була не у вікна, а в підкладки. `.modal` у журналі
   має `overflow:auto` і по 4vh відступу згори й знизу, а `.modal-box`
   додає знизу ще 6vh — разом із власними 88vh вікна це 102vh, тобто
   завжди більше за екран. Поки форма була коротка, смужка мовчала; на
   «своїх умовах» вона з'являлась і зсувала вікно вбік. Гортати
   підкладці нема чого: форма гортається всередині себе. */
#runModal{overflow:hidden}
#runModal #runBox{margin-bottom:0}
#runModal #runBox{transform:translateY(8px) scale(.985);
  transition:transform .18s cubic-bezier(.16,1,.3,1)}
#runModal.in #runBox{transform:none}
@media(prefers-reduced-motion:reduce){
  #runModal, #runModal #runBox{transition:none}
}

#runBody{gap:18px}
/* Кроки — звичайні div усередині форми, і без власного кроку їхні поля
   злипались: підпис дат починався одразу під кнопкою інструмента.
   `hidden` повертаємо явно — display:flex інакше його перебиває. */
#runStep1, #runStep2, #runAcc{display:flex; flex-direction:column; gap:18px}
#runStep1[hidden], #runStep2[hidden]{display:none}
#runAcc:empty{display:none}
#runBox .ac-f > span{color:var(--text); font-size:12.5px; font-weight:500;
  margin-bottom:7px}
#runBox .ac-f > span i{font-weight:400; color:var(--faint)}

/* Смужка кроків: кружок із номером (пройдений — галочка) і назва; між
   кроками тонка доріжка, яка заливається при переході (fillSteps). */
.rs-steps{display:flex; align-items:center; padding:2px 0 4px; font-size:12.5px;
  color:var(--faint)}
.rs-steps .s{display:inline-flex; align-items:center; gap:8px; flex:none;
  white-space:nowrap; transition:color .25s}
.rs-steps .s b{font-weight:500}
.rs-steps .n{display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  font-family:var(--mono); font-size:11px; font-weight:600; font-style:normal;
  color:var(--faint); box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s, color .3s, box-shadow .3s}
.rs-steps .s.on{color:var(--text)}
.rs-steps .s.on .n{background:var(--accent); color:var(--bg, #050505);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent)}
/* Пройдений крок лишається акцентним: він не зник, він позаду. */
.rs-steps .s.done{color:var(--dim)}
.rs-steps .s.done .n{background:var(--accent-soft); color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent)}
.rs-steps .bar{position:relative; flex:1; height:2px; margin:0 12px; border-radius:2px;
  background:var(--line); overflow:hidden}
.rs-steps .bar i{position:absolute; top:0; left:0; bottom:0; width:0; border-radius:2px;
  background:var(--accent); transition:width .45s cubic-bezier(.16,1,.3,1)}
.rs-steps .s.pop .n{animation:rs-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes rs-pop{from{transform:scale(.6)} to{transform:none}}
@media(max-width:520px){
  /* на вузькому екрані назва лишається тільки в поточного кроку */
  .rs-steps .s:not(.on) b{display:none}
}
@media(prefers-reduced-motion:reduce){
  .rs-steps .bar i, .rs-steps .s, .rs-steps .n{transition:none; animation:none}
}

/* Інструмент: та сама кнопка-поле, що й дати, але без класу ac-date —
   його ловить делегований обробник журналу й відкриває календар. */
.rs-sym{display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer}
.rs-sym > span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.rs-sym svg{flex:none; color:var(--faint)}
.rs-sym:hover{border-color:var(--faint)}
.rs-sym:hover svg{color:var(--dim)}
/* Поки інструмент не обрано, в полі стоїть запрошення, а не назва. */
.rs-sym:not([data-set]) > span{color:var(--faint)}
/* Брокер до вибору інструмента нічого не пропонує — і виглядає так. */
.rs-sym:disabled{opacity:.5; cursor:default}
.rs-sym:disabled:hover{border-color:var(--line)}


/* Поле інструментів: узяте лежить пігульками в тому ж рядку, де й
   набирають наступне. Ззовні це таке ж поле, як решта (.ac-in), тільки
   рамка на обгортці, а не на самому рядку вводу. */
.rs-pick{display:flex; flex-wrap:wrap; align-items:center; gap:6px; cursor:text;
  min-height:44px; padding:5px 8px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--panel-2)}
.rs-pick:hover{border-color:var(--faint)}
.rs-pick:focus-within{border-color:var(--accent);
  outline:2px solid var(--accent); outline-offset:1px}
/* Обгортка пігульок — звичайний рядок, який займає рівно стільки,
   скільки в ній пігульок. Рости їй нікуди: вільне місце належить
   рядку вводу, інакше тло пігульки тягнеться на півполя порожнім. */
.rs-chips{display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  flex:0 1 auto; min-width:0; max-width:100%}
.rs-chips:empty{display:none}
.rs-in{flex:1; min-width:130px; border:0; background:none; color:var(--text);
  font:inherit; font-size:15px; padding:5px 3px}
.rs-in:focus{outline:none}
/* Підказка в полі — тихим тоном, а не кольором тексту: у темних
   темах --faint дорівнює --text, і «наберіть назву…» читалось як уже
   набране. Так само в усіх полях вікна (назва журналу, депозит). */
.rs-in::placeholder, #runBox .ac-in::placeholder{color:var(--faint-2, var(--faint))}
/* Узятий інструмент — кольором оформлення, як і відмічений рядок
   у списку. Перший — той, хто стане на графік: у нього смужка
   збоку, а не додаткове слово в пігульці. */
.rs-chip{display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; max-width:100%;
  padding:4px 4px 4px 9px; border-radius:999px; background:var(--accent-soft);
  color:var(--text); font-family:var(--mono); font-size:12px;
  box-shadow:inset 0 0 0 1px var(--accent)}
.rs-chip.main{position:relative; padding-left:14px}
.rs-chip.main::before{content:""; position:absolute; left:6px; top:50%;
  width:3px; height:11px; margin-top:-5.5px; border-radius:2px; background:var(--accent)}
/* Брокер у пігульці — уточнення, а не назва: тихіше й дрібніше за
   сам тікер, який тут головний. */
.rs-chip i{font-style:normal; font-size:10.5px; color:var(--dim); margin-left:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rs-chip .x{display:grid; place-items:center; width:18px; height:18px; border:0;
  padding:0; background:none; color:var(--dim); font-size:15px; line-height:1;
  cursor:pointer; border-radius:999px}
.rs-chip .x:hover{color:var(--text); background:var(--line-soft)}

.rs-modes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
/* Картка режиму: назва й один рядок про те, що з грошима. Обрана
   світиться акцентом — це головний вибір у вікні. */
.rs-mode{display:flex; flex-direction:column; gap:5px; text-align:left; min-width:0;
  border:1px solid var(--line); background:var(--panel-2); border-radius:var(--r);
  padding:13px 14px; color:var(--text); font:inherit; cursor:pointer; transition:.18s}
.rs-mode:hover{border-color:var(--faint); background:var(--panel)}
.rs-mode.on{border-color:var(--accent); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent)}
.rs-mode:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.rs-mode .t{display:flex; align-items:baseline; gap:7px; min-width:0}
.rs-mode b{font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.rs-mode p{margin:0; color:var(--dim); font-size:12px; line-height:1.4}
/* Режим, у якому ще не все готово, каже про це однією міткою біля назви. */
.rs-soon{flex:none; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; font-style:normal; color:var(--faint);
  border:1px solid var(--line); border-radius:10px; padding:1px 6px}
.rs-mode.on .rs-soon{color:var(--accent); border-color:var(--accent)}


/* ---------------- крок «челендж» у вікні старту ---------------- */
/* Три рішення згори вниз: фірма (ряд значків-фільтрів), програма
   (картки) і розмір рахунку (пігулки). Під ними умови — те, за чим
   прогін буде судити, написане словами.

   Фірми саме рядом, а не шторкою: програм дев'ять, і натиснути значок
   — одне натискання замість двох.

   Шрифт тут звичайний, не var(--mono): Archivo стоїть на цифрах угод,
   а в цьому кроці все — звичайний текст, і два різні обличчя в одному
   вікні видно відразу. Цифри рівняє font-variant-numeric. */

/* Кожен ярус вибору стоїть окремо: без цього «Розмір рахунку»
   злипався з картками програм. */
#runStepC > .ac-f{margin-top:18px}
#runStepC > #runOwn:not([hidden]){margin-top:18px}

/* Фірми — вкладки на одній лінії; під обраною зелена риска, одна на
   ряд, і вона їде до нової (місце й ширину ставить slideFirm() через
   --fx/--fw). Ряд посередині: через auto-відступи крайніх, а не
   justify-content:center — інакше при тісноті перші обрізались би зліва
   без прокрутки. Логотипи сірі, поки фірма не обрана. */
.rs-firms{position:relative; isolation:isolate; display:flex; gap:2px; margin-bottom:18px;
  overflow-x:auto; scrollbar-width:none; box-shadow:inset 0 -1px 0 var(--line)}
.rs-firms::-webkit-scrollbar{display:none}
.rs-firms::before{content:""; position:absolute; left:0; bottom:0; z-index:-1; height:2px;
  width:var(--fw, 0); border-radius:2px; background:var(--accent);
  transform:translateX(var(--fx, 0)); pointer-events:none;
  transition:transform .32s cubic-bezier(.16,1,.3,1), width .32s cubic-bezier(.16,1,.3,1)}
.rs-firms.now::before{transition:none}
.rs-firm{display:inline-flex; align-items:center; gap:7px; flex:none; padding:10px 12px 12px;
  border:0; background:none; color:var(--faint); font:inherit; font-size:13px;
  font-weight:500; white-space:nowrap; cursor:pointer; transition:color .2s}
.rs-firm:first-child{margin-left:auto}
.rs-firm:last-child{margin-right:auto}
.rs-firm img{width:16px; height:16px; border-radius:4px; object-fit:contain; flex:none;
  filter:grayscale(1); opacity:.55; transition:filter .2s, opacity .2s}
.rs-firm:hover, .rs-firm.on{color:var(--text)}
.rs-firm:hover img, .rs-firm.on img{filter:none; opacity:1}
.rs-firm:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px}

.rs-progs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
/* Картка програми — як преміальна банківська картка: тонка діагональна
   штриховка, великий водяний знак логотипа фірми в кутку (.rs-wm), світло
   за курсором (.rs-glow, --mx/--my ставить replay-start.js). Обрана —
   акцентна рамка й штриховка, знак у кольорі, знизу зелена тінь; при
   виборі по картці проходить відблиск (.rs-sheen). Зверху назва й ціна,
   знизу три цифри, за якими програму обирають; ціль — найбільша. */
.rs-prog{position:relative; isolation:isolate; overflow:hidden; display:flex;
  flex-direction:column; justify-content:space-between; gap:14px; min-height:150px;
  text-align:left; min-width:0; padding:18px; border-radius:16px; color:var(--text);
  font:inherit; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px,
      transparent 1px 8px),
    linear-gradient(160deg, var(--panel-2), var(--bg, #050505) 90%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  transition:border-color .25s, box-shadow .35s, transform .25s cubic-bezier(.16,1,.3,1)}
.rs-prog:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--text) 16%, transparent)}
.rs-prog:active{transform:scale(.98)}
.rs-prog.on{border-color:var(--accent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px,
      transparent 1px 8px),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--panel-2)), var(--bg, #050505) 90%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--accent) 40%, transparent),
    0 16px 40px -18px color-mix(in srgb, var(--accent) 55%, transparent)}
.rs-prog:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.rs-prog > .t, .rs-prog > .rs-nums{position:relative; z-index:2}
.rs-wm, .rs-glow, .rs-sheen{position:absolute; pointer-events:none}
.rs-wm{right:-22px; bottom:-26px; z-index:0; width:120px; height:120px;
  background:center/contain no-repeat; filter:grayscale(1); opacity:.07;
  transition:opacity .4s, filter .4s, transform .5s cubic-bezier(.16,1,.3,1)}
/* у «своїх умов» логотипа немає — замість нього порожня рамка знака */
.rs-wm.none{border:2px solid var(--text); border-radius:28px; opacity:.05}
.rs-prog:hover .rs-wm{transform:rotate(-6deg) scale(1.04)}
.rs-prog.on .rs-wm{filter:none; opacity:.16}
.rs-glow{inset:0; z-index:1; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%)}
.rs-prog:hover .rs-glow{opacity:1}
.rs-sheen{inset:0; z-index:3; opacity:0; transform:translateX(-100%);
  background:linear-gradient(105deg, transparent 35%,
    color-mix(in srgb, #fff 16%, transparent) 50%, transparent 65%)}
.rs-prog.pick .rs-sheen, .rs-progs.swap .rs-prog.on .rs-sheen{
  animation:rs-sheen .9s cubic-bezier(.16,1,.3,1)}
@keyframes rs-sheen{from{opacity:1; transform:translateX(-100%)}
  to{opacity:1; transform:translateX(100%)}}
.rs-prog .t{display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0}
/* Місце під ціну в кутку відводимо лише там, де ціна є: у картці
   «свої умови» її немає, і назва мала б дірку праворуч. */
.rs-prog:has(.rs-price) .t{padding-right:52px}
.rs-prog b{font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--text)}
/* «Звірити» — цифри взяті не з кабінету фірми. Жовтим, бо це не опис
   програми, а попередження про саму цифру. */
.rs-prog .rs-soon{flex:none; font-family:inherit; font-size:10.5px;
  font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--be);
  background:var(--be-soft); border-color:transparent; border-radius:999px;
  padding:2px 8px}
.rs-nums{display:flex; flex-wrap:wrap; gap:8px 22px}
.rs-nums i{display:flex; flex-direction:column; gap:5px; font-style:normal;
  font-family:var(--mono); font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums; line-height:1.2; color:var(--text)}
.rs-nums i:first-child{font-size:18px; letter-spacing:-.02em}
.rs-nums u{text-decoration:none; font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.rs-price{position:absolute; top:18px; right:18px; z-index:2; font-family:var(--mono);
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text)}
.rs-prog.on .rs-price{color:var(--accent)}

/* Рух-відповіді (класи ставить pulse() у replay-start.js): крок
   виїжджає знизу; нова фірма — картки каскадом; інша програма —
   картка «приймає» вибір; ціна від розміру ледь блимає. */
#runStepC:not([hidden]){animation:rs-up .38s cubic-bezier(.16,1,.3,1) both}
.rs-progs.swap .rs-prog{animation:rs-up .36s cubic-bezier(.16,1,.3,1) both}
.rs-progs.swap .rs-prog:nth-child(2){animation-delay:.05s}
.rs-progs.swap .rs-prog:nth-child(3){animation-delay:.1s}
.rs-progs.swap .rs-prog:nth-child(4){animation-delay:.15s}
.rs-prog.pick{animation:rs-pick .34s cubic-bezier(.34,1.56,.64,1)}
.rs-price.tick{animation:rs-tick .4s cubic-bezier(.16,1,.3,1)}
@keyframes rs-up{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes rs-pick{from{transform:scale(.975)} to{transform:none}}
@keyframes rs-tick{from{opacity:.2; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* Розмір рахунку. Ползунок, а не ряд пігулок: розмірів буває шість, і
   числа в них довгі — рядом вони зливаються в сходинки, у які ще й
   треба влучити. */
.rs-size{margin-top:10px}
.rs-size-v{display:flex; align-items:baseline; gap:7px; margin-bottom:2px}
.rs-size-v b{display:inline-block; font-size:30px; font-weight:500; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:var(--text)}
.rs-size-v b.bump{animation:rs-bump .28s cubic-bezier(.16,1,.3,1)}
@keyframes rs-bump{from{opacity:.35; transform:translateY(6px)} to{opacity:1; transform:none}}
.rs-size-v span{font-size:12px; font-weight:500; color:var(--dim)}

/* Сам <input> лишається на місці прозорим — з нього клавіатура,
   доступність і перетягування, — а видимі частини малюємо поруч і
   возимо однією змінною --pk. Місце під кульку — 22px, тому їх скрізь
   і віднімаємо; сама кулька 16px і стоїть посередині цього місця. */
.rs-sl{position:relative; height:34px}
.rs-range{position:absolute; left:0; top:0; z-index:3; width:100%; height:34px;
  margin:0; padding:0; opacity:0; cursor:grab; background:none;
  -webkit-appearance:none; appearance:none}
.rs-range:active{cursor:grabbing}
.rs-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%; background:none}
.rs-range::-moz-range-thumb{width:22px; height:22px; border-radius:50%;
  border:none; background:none}
.rs-tr, .rs-fl, .rs-th{position:absolute; pointer-events:none}
.rs-tr{left:0; right:0; top:50%; height:2px; margin-top:-1px;
  border-radius:99px; background:var(--line)}
.rs-fl{left:0; top:50%; height:2px; margin-top:-1px;
  width:calc(11px + var(--pk, 0) * (100% - 22px));
  border-radius:99px; background:var(--accent);
  transition:width .16s var(--ease, ease)}
.rs-th{top:50%; width:16px; height:16px; margin-top:-8px;
  left:calc(3px + var(--pk, 0) * (100% - 22px)); border-radius:50%;
  background:var(--text);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  transition:left .16s var(--ease, ease),
             transform .2s cubic-bezier(.34,1.56,.64,1)}
/* Під пальцем заливка й кулька йдуть без згладжування — рівно за
   рукою. */
.rs-range:active ~ .rs-fl{transition:none}
.rs-range:active ~ .rs-th{transform:scale(1.3);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.rs-range:focus-visible ~ .rs-th{box-shadow:0 0 0 4px var(--accent-soft),
  0 0 0 6px var(--accent)}

/* Свій депозит: стрілок у полі суми немає — їх ніхто не тягне на
   десятки тисяч, а виглядали вони чужими. Набирати й стрілками на
   клавіатурі можна, як і раніше. Готові суми — ползунок, як розмір
   рахунку в челенджі; набрана руками сума стоїть на своєму місці між
   сходинками, і жодна мітка не світиться. */
#runBal{-moz-appearance:textfield; appearance:textfield}
#runBal::-webkit-outer-spin-button, #runBal::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0}
/* «USD» — підписом у правому краї поля суми (свій депозит завжди в
   доларах, поля валюти немає). */
.rs-bal{position:relative}
.rs-bal .ac-in{padding-right:64px}
.rs-bal-cur{position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--dim); pointer-events:none}
.rs-dep{margin-top:8px}

/* Мітки — ті самі сходинки списку, рівно під кулькою. По них можна
   клацнути. Крайні тримаються за свій край. */
.rs-scale{position:relative; height:20px; margin-top:4px}
.rs-tick{position:absolute; top:0; transform:translateX(-50%);
  padding:2px 4px; border:0; background:none; color:var(--faint);
  font:inherit; font-size:11px; font-variant-numeric:tabular-nums;
  white-space:nowrap; cursor:pointer;
  transition:color .15s, left .24s var(--ease, ease)}
/* Мітка, якої в минулій програмі не було, не їде нізвідки: вона
   проявляється на своєму місці. */
.rs-tick.born{animation:rs-tick-in .24s var(--ease, ease) both}
@keyframes rs-tick-in{from{opacity:0} to{opacity:1}}
.rs-tick:first-child{transform:translateX(-11px)}
.rs-tick:last-child{transform:translateX(calc(-100% + 11px))}
.rs-tick:hover{color:var(--text)}
.rs-tick.on{color:var(--accent); font-weight:600}
.rs-tick:focus-visible{outline:2px solid var(--accent); outline-offset:1px;
  border-radius:6px}

@media(prefers-reduced-motion:reduce){
  #runStepC, .rs-progs.swap .rs-prog, .rs-prog.pick, .rs-price.tick,
  .rs-size-v b.bump{animation:none}
  .rs-firms::before{transition:none}
  .rs-prog:hover, .rs-prog:active, .rs-prog:hover .rs-wm{transform:none}
  .rs-prog.pick .rs-sheen, .rs-progs.swap .rs-prog.on .rs-sheen{animation:none}
}

@media(max-width:640px){
  .rs-progs{grid-template-columns:minmax(0,1fr)}
  .rs-firm{min-height:38px}
  .rs-tick{font-size:10px; padding:2px}
  .rs-sl{height:40px}
  .rs-range{height:40px}
}


/* Валюта — три літери, повна половина рядка їй ні до чого. */
.ac-cur{grid-template-columns:minmax(0,1fr) 92px}

@media(max-width:640px){.rs-modes{grid-template-columns:minmax(0,1fr)}}

/* ---------------- телефон ---------------- */
/* Журнал дивляться з телефона частіше, ніж із ноутбука. Тут не «щоб
   влізло»: у все, що натискають, треба потрапити пальцем, а поля мусять
   бути такі, щоб Safari не наближав сторінку сам. */
@media (max-width:900px){
  .ac-grid{grid-template-columns:minmax(0,1fr)}
  /* Ширину заголовка на телефоні задає спільна .ohead у mobile.css. */
  .ac-new{margin-left:0; width:100%; min-height:46px}
  .ac-alloc{width:100%}
}
@media (max-width:560px){
  /* ---- картка ---- */
  .ac-card{padding:16px 15px 8px; gap:12px}
  /* проміжок усередині середини тримаємо такий самий, як у картки */
  .ac-mid{gap:12px}
  .ac-mid:empty{margin-bottom:-12px}
  .ac-bal .big{font-size:26px}

  /* ---- розбір злитого рахунку ---- */
  /* Підпис і значення в один рядок тут не вміщуються: «найчастіша
     помилка» плюс саму помилку в 330 пікселів не вкласти. Значення
     переїжджає під підпис. */
  .ac-wline{flex-direction:column; align-items:flex-start; gap:2px}
  .ac-wline b{margin-left:0; text-align:left}

  /* ---- форма нижнім листом ---- */
  /* Вікно посеред екрана на телефоні незручне: до кнопок унизу треба
     тягтись через півекрана. Лист приїжджає знизу, кнопки лишаються під
     великим пальцем, а вміст гортається всередині. */
  .modal:has(.ac-form){align-items:flex-end; padding:0}
  /* Висота — від видимої частини екрана (dvh), а не від vh. vh рахується
     без адресного рядка браузера: поки він на місці, лист виходив вищим
     за видиму область, притиснутий низом — і його верх із заголовком
     ішов за край екрана. Прогорнути туди було нічим: сторінка під
     вікном не рухається, а всередині листа прокрутка починається нижче.
     Перший рядок лишаємо для старих браузерів, які dvh не знають. */
  .modal-box:has(.ac-form){max-width:none; max-height:94vh; margin-bottom:0;
    border-radius:16px 16px 0 0; border-bottom:0}
  .modal-box:has(.ac-form){max-height:94dvh}
  .modal-box:has(.ac-form) .m-foot{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  /* 16px — межа, нижче якої Safari сам наближає сторінку на фокусі, і
     потім людина вручну відсуває її назад. */
  .ac-in, .rs-in{font-size:16px}
  .ac-row2{grid-template-columns:minmax(0,1fr)}
  /* Три відсотки — по двоє в ряд: числа короткі, а рядків у формі
     й без того чотирнадцять. */
  .ac-row3{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Валюта поруч зі стартовим балансом, «баланс зараз» — рядком нижче:
     три поля в ряд на телефоні перетворюються на три вузькі колонки. */
  .ac-money{grid-template-columns:minmax(0,1fr) 86px}
  .ac-money > :nth-child(1){grid-column:1; grid-row:1}
  .ac-money > :nth-child(3){grid-column:2; grid-row:1}
  .ac-money > :nth-child(2){grid-column:1 / -1; grid-row:2}
  /* Підказки під полем — теж кнопки, і тикають у них пальцем. */
  .ac-pick{min-height:44px; padding:9px 13px; font-size:12.5px; display:inline-flex;
    align-items:center}
  /* Хрестик вікна на телефоні мусить бути кнопкою, а не значком у 24 пікселі. */
  .modal-box:has(.ac-form) .m-head .x{padding:10px 13px; font-size:22px}
  /* Стрілка списку фірм: поле відкриває той самий список, але в саму
     стрілку теж мають потрапляти. */
  .ac-combo-x{width:40px; height:40px}
  .ac-combo-in .ac-in{padding-right:44px}
}
@media (prefers-reduced-motion:reduce){
  .ac-bul-t i{transition:none}
}

/* ---------------- список замість сітки ----------------

   Журнали бектесту й сесії вміють показуватись двома виглядами:
   картками (сітка вище) і списком (прохання власника 20.10.2026).
   Коли записів багато, список читається одним стовпчиком назв зверху
   вниз, а сітка змушує бігати очима по рядах і колонках.

   Зміст рядка той самий, що в картки, тільки розкладений поперек:
   назва, підсумок, цифри, звʼязки, дії. Класи спільні — обидва розділи
   малюють рядок однаково, щоб список не розʼїхався на два різні. */
.lv-list{display:flex; flex-direction:column; gap:8px}
.lv-list > .shell{margin-bottom:0}
:root .lv-list > .shell + .shell{margin-top:0}
.lv-row{display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px;
  padding:14px 20px; cursor:pointer; transition:box-shadow .16s}
.lv-row:hover{box-shadow:0 0 0 1px var(--line) inset}

/* Назва тягне рядок: вона найдовша й по ній шукають. */
.lv-name{flex:1 1 200px; min-width:0}
.lv-name b{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lv-name > span{display:block; margin-top:2px; color:var(--faint); font-size:12px}

.lv-big{flex:0 0 auto; min-width:76px; text-align:right; font-family:var(--mono);
  font-size:19px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.lv-big.up{color:var(--up)}
.lv-big.down{color:var(--down)}

/* Цифри — тією самою парою «підпис зверху, число знизу», що в картці:
   рядок і картка мусять читатись як один розділ, а не два. */
.lv-cells{flex:1 1 270px; display:flex; gap:26px; min-width:0}
.lv-c{min-width:0}
.lv-c .l{font-family:var(--mono); font-size:8.5px; letter-spacing:.11em;
  line-height:1.2; text-transform:uppercase; color:var(--faint); white-space:nowrap}
.lv-c .v{margin-top:3px; font-family:var(--mono); font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums; white-space:nowrap}

/* Дії — праворуч, своїм краєм: у рядку немає низу картки, куди вони
   лягали б самі. */
.lv-foot{flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:14px}

/* Звʼязки (журнали сесії, сесії журналу) у рядку стоять окремим
   стовпчиком, а не абзацом під цифрами: верхній відступ абзацу тут
   зайвий. */
.lv-row .bts-js, .lv-row .btj-sess{flex:0 1 auto; margin:0; padding-top:0; border-top:0}

/* Рядок над картками з перемикачем вигляду. Стоїть тут, а не в шапці
   розділу: перемикач про картки, а в шапці він сперечався за увагу з
   головною кнопкою. І виглядає тихіше за сегменти шапки — дрібніший
   кегль, без власного тла. */
.lv-bar{display:flex; justify-content:flex-start; margin:-6px 0 12px}
.lv-sw{flex:0 0 auto; margin-left:0; padding:2px; border-color:transparent;
  background:none; box-shadow:none}
.lv-sw button{padding:5px 11px; font-size:11.5px; border-radius:8px; color:var(--faint)}
.lv-sw button.on{color:var(--text); background:var(--panel-2); border-color:var(--line-soft);
  box-shadow:none}

@media (max-width:900px){
  /* Вузький екран: рядок складається у два поверхи — назва з підсумком
     зверху, цифри й дії під ними. Витискати п'ять частин в одну лінію
     на телефоні нема куди. */
  .lv-row{gap:10px 16px; padding:14px 15px}
  .lv-name{flex:1 1 100%}
  .lv-big{min-width:0; text-align:left; font-size:17px}
  .lv-cells{flex:1 1 100%; gap:18px; flex-wrap:wrap}
  .lv-foot{flex:1 1 100%; margin-left:0; justify-content:flex-start}
  .lv-sw{margin-left:0}
}

/* ---------------- олівець «правити» ----------------

   Слово «Правити» стояло в низу кожної картки — рахунку, журналу,
   сесії — і важило стільки ж, скільки головна дія поруч, хоч ідуть у
   нього вчетверо рідше. Тепер це значок у правому нижньому куті
   (прохання власника 20.10.2026): місце те саме на всіх картках, слово
   лишається підказкою й читалкою екрана.

   Той самий олівець, що в списку стратегій (.sw-pen у style.css) —
   щоб «правити» виглядало однаково скрізь. */
.ac-pen{margin-left:auto; display:grid; place-items:center; width:30px; height:30px;
  flex:0 0 auto; border:0; border-radius:9px; background:none; color:var(--faint);
  cursor:pointer; transition:color .18s, background .18s, transform .12s}
.ac-pen:hover{color:var(--accent); background:var(--panel-2)}
.ac-pen:active{transform:scale(.9)}
.ac-pen:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Олівець сам тулиться до правого краю, тож розпірка перед ним зайва. */
.ac-foot .sp + .ac-pen, .lv-foot .sp + .ac-pen{margin-left:0}
/* Картка на дотик: значок мусить бути завбільшки з палець. */
@media (max-width:620px){
  .ac-pen{width:40px; height:40px}
}