/* Журнали бектесту (btj.js). Картки, поля й сітка — з accounts.css;
   тут лише те, чого в рахунків немає. */

.btj-note{white-space:pre-wrap}
.btj-go{font-weight:500; color:var(--accent)}
.btj-card{cursor:pointer; transition:box-shadow .16s}
.btj-card:hover{box-shadow:0 0 0 1px var(--line) inset}

/* Сесії, що писали в журнал. Та сама стрічка, що й журнали на картці
   сесії (.bts-js у btsess.css) — звʼязок читається однаково з обох
   боків. Імена — кнопками: ведуть у розділ «Бектест» на цю сесію. */
.btj-sess{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin-top:2px}
.btj-sess .l{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.btj-s{padding:0; border:0; background:none; font:inherit; font-size:11.5px;
  color:var(--accent); cursor:pointer; border-bottom:1px solid transparent;
  transition:border-color .16s}
.btj-s:hover{border-bottom-color:currentColor}
/* Прив'язана, але порожня: бліда — видно, що її цифр у журналі ще немає. */
.btj-s.soft{color:var(--faint)}
.btj-more{font-size:11.5px; color:var(--faint)}
/* Шапка відкритого журналу: стрічка окремим рядком під вкладками. */
.btj-nav + .btj-sess{margin:8px 0 2px}
/* Сітка — спільна з «Рахунками» (accounts.css). */

/* ---- шапка всередині журналу: назад до списку, назва, вкладки ----
   Стоїть і в календарі (.jhead), і в огляді (.ohead) — однаково в обох,
   щоб при перемиканні вкладок нічого не стрибало. */
.btj-head{flex:1 1 100%; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0}
.btj-back{display:inline-flex; align-items:center; gap:4px; color:var(--faint); font-size:13px;
  text-decoration:none; padding:2px 6px 2px 0; transition:color .16s}
.btj-back:hover{color:var(--text)}

/* Фільтр журналу в «Аналітиці»: маленька кнопка поруч із заголовком. */
.btj-filter{display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:7px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text);
  font:inherit; font-size:13px; cursor:pointer; transition:border-color .16s}
.btj-filter:hover, .btj-filter[aria-expanded="true"]{border-color:var(--accent)}
.btj-filter span{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.btj-filter b{font-weight:500; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btj-filter svg{color:var(--faint)}

/* Назва журналу в рядку перемотки місяців: зліва, навпроти «‹ місяць ›». */
.panehead .btj-pane, .jpane-list h3 .btj-pane{margin-right:auto}
/* назва зверху, актив і період — тихим рядком під нею */
.btj-pane{display:flex; flex-direction:column; gap:1px; min-width:0; padding-left:6px; line-height:1.3}
.btj-pane b{font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--text);
  text-transform:none; font-family:var(--sans)}
.btj-pane span{font-size:12.5px; font-weight:400; color:var(--faint); letter-spacing:0;
  text-transform:none; font-family:var(--sans)}
@media (max-width:560px){
  /* на телефоні назва — своїм рядком над перемоткою */
  .panehead:has(.btj-pane){flex-wrap:wrap; row-gap:10px}
  .panehead .btj-pane{flex:1 1 100%; padding-left:4px}
}

/* Вкладки журналу: зверху — що дивимось (підкреслення, як «Огляд / Рахунки»
   в реальному режимі), збоку — вигляд журналу сегментом. Різна форма —
   щоб не читались як один ряд рівноправних кнопок. */
/* не на весь рядок: праворуч від вкладок ще стають «Поділитись» і періоди огляду */
/* Висота рядка однакова з перемикачем вигляду й без нього (у «Усіх угодах»
   його немає) — інакше вкладки підстрибували на 3px при переході. Вкладки
   притиснуті до низу: підкреслення лежить на лінії рядка. */
.btj-nav{flex:1 1 auto; display:flex; align-items:flex-end; gap:14px 20px; flex-wrap:wrap;
  min-height:52px; border-bottom:1px solid var(--line-soft)}
.btj-main{display:flex; gap:22px}
.btj-main button{border:0; background:none; padding:10px 0 11px; margin-bottom:-1px;
  font:inherit; font-size:15px; font-weight:500; color:var(--faint); cursor:pointer;
  border-bottom:2px solid transparent; transition:color .16s, border-color .16s}
.btj-main button:hover{color:var(--text)}
.btj-main button.on{color:var(--text); border-bottom-color:var(--accent)}
.btj-main button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
/* .btj-nav спереду — інакше .jhead .seg-tabs{margin-left:0} зі style.css
   тримав би перемикач впритул до вкладок. */
.btj-nav .btj-style{margin-left:auto; margin-bottom:6px}
/* Перемикач стратегій поруч із вкладками: рядок вирівняний по низу, тож
   піднімаємо його на ту саму лінію, що й перемикач вигляду. */
.btj-nav .sw-pill{margin-bottom:6px}
@media (max-width:560px){
  .btj-main{gap:18px}
  .btj-main button{font-size:14.5px; padding:12px 0}
  /* на телефоні вигляд журналу — окремим рядком на всю ширину */
  .btj-nav .btj-style{margin-left:0; width:100%; margin-bottom:10px}
  .btj-style button{flex:1}
  .btj-nav .sw-pill{margin-bottom:10px}
}

/* «З Notion» поруч із «Новий журнал» */
.btj-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btj-acts .ac-new{margin-left:0}
.ac-empty .btj-acts{margin:4px 0 0;justify-content:center}
@media (max-width:640px){.btj-acts{margin-left:0;width:100%}.btj-acts .btn{flex:1}}