/* ==========================================================
   Живі віджети замість скріншотів у секціях фіч
   ----------------------------------------------------------
   .split-frame лишається рамкою секції, всередину замість
   <img> кладемо розмітку віджета з product-widgets.css.
   Власну рамку й тінь віджета гасимо — інакше рамка в рамці.
   ========================================================== */

[data-site-refresh-content] .split-frame--live {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 357px;
  padding: var(--sp-4);
  background: var(--pw-surface, #101010);
}
[data-site-refresh-content] .split-frame--live .dashboard-widget {
  border: 0; box-shadow: none; background: transparent;
}
[data-site-refresh-content] .split-frame--live .widget-header { padding: 0 0 var(--sp-4); min-height: 0; }
[data-site-refresh-content] .split-frame--live .widget-content { padding: 0; }

/* журнал у секції показує п'ять колонок замість тринадцяти —
   на 535 px решта все одно нечитабельна */
[data-site-refresh-content] .split-frame--live .journal th:first-child,
[data-site-refresh-content] .split-frame--live .journal td:first-child { padding-left: 0; }
[data-site-refresh-content] .split-frame--live .journal th:last-child,
[data-site-refresh-content] .split-frame--live .journal td:last-child { padding-right: 0; text-align: right; }
[data-site-refresh-content] .split-frame--live .journal td { height: 44px; }
[data-site-refresh-content] .split-frame--live .journal .num { font-weight: 700; font-variant-numeric: tabular-nums; }
[data-site-refresh-content] .split-frame--live .journal .num.pos { color: var(--pw-pos, #2f8058); }
[data-site-refresh-content] .split-frame--live .journal .num.neg { color: var(--pw-neg, #a74846); }

/* стилі виплат переїхали в product-widgets.css — вони про віджет, не про секцію */

@media (max-width: 900px) {
  [data-site-refresh-content] .split-frame--live { min-height: 0; }
}

/* Account Balance у продукті малюється не зеленим, а світло-сірим,
   із крапками на точках даних і ледь помітною сірою заливкою */
[data-site-refresh-content] .pw .chart .line.neutral { stroke: rgba(255,255,255,.82); stroke-width: 2; }
[data-site-refresh-content] .pw .chart .dot { fill: #d4d4d4; }
[data-site-refresh-content] .pw .agg-caret { width: 8px; height: 8px; }

/* ==========================================================
   Секція журналу на всю ширину — таблиця з усіма колонками
   ========================================================== */
[data-site-refresh-content] .jrn { padding: var(--sp-30) 0; }
[data-site-refresh-content] .jrn-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
[data-site-refresh-content] .jrn-head { max-width: 720px; margin: 0 auto var(--sp-10); text-align: center; }
[data-site-refresh-content] .jrn-head h2 { margin: var(--sp-3) 0 0; }
[data-site-refresh-content] .jrn-head p {
  margin: var(--sp-4) 0 0; font-size: var(--fs-16);
  line-height: 1.65; color: var(--text-muted);
}

/* картка таблиці; праворуч — згасання, бо колонок більше, ніж влазить */
[data-site-refresh-content] .jrn-card {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--r-16);
  background: var(--pw-surface, #101010);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 26px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
[data-site-refresh-content] .jrn-card::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 10px; width: 64px;
  background: linear-gradient(90deg, transparent, #101010);
  pointer-events: none;
}
/* таблиця ширша за екран — гортається вбік, як у застосунку */
[data-site-refresh-content] .jrn-scroll {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: #333338 transparent;
  overscroll-behavior-x: contain;
}
[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar { height: 8px; }
[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-track { background: transparent; }
[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-thumb { background: #2b2b31; border-radius: 100px; }
[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-thumb:hover { background: #3a3a42; }

/* смуга метрик над таблицею — теж гортається */
[data-site-refresh-content] .jrn-metrics {
  display: flex; gap: 8px; padding: 8px 12px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
[data-site-refresh-content] .jrn-metrics::-webkit-scrollbar { display: none; }
[data-site-refresh-content] .jrn-metrics .metric-card { flex: 0 0 auto; }

/* підказка про горизонтальний скрол */
[data-site-refresh-content] .jrn-hint {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3);
  font-size: var(--fs-12); color: var(--text-muted);
}
[data-site-refresh-content] .jrn-hint svg { width: 14px; height: 14px; }

/* шапка місяця з плашками підсумків */
[data-site-refresh-content] .pw .month-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 12px 16px;
}
[data-site-refresh-content] .pw .month-title { font-size: 14px; font-weight: 600; }
[data-site-refresh-content] .pw .month-stats { display: flex; align-items: center; gap: 8px; }
[data-site-refresh-content] .pw .month-stats .cnt { font-size: 12px; font-weight: 500; color: #888; }
[data-site-refresh-content] .pw .month-stats b {
  padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500;
}
[data-site-refresh-content] .pw .m-pos { color: #2f8058; background: rgba(47,128,88,.10); }
[data-site-refresh-content] .pw .m-neg { color: #ef4444; background: rgba(239,68,68,.10); }
[data-site-refresh-content] .pw .m-rr  { color: #f59e0b; background: rgba(245,158,11,.10); }
[data-site-refresh-content] .pw .m-wr  { color: #3b82f6; background: rgba(59,130,246,.10); }

/* повна таблиця */
[data-site-refresh-content] .pw .journal--full { width: max-content; min-width: 100%; border-collapse: collapse; }
[data-site-refresh-content] .pw .journal--full th:first-child,
[data-site-refresh-content] .pw .journal--full td:first-child { padding-left: 16px; }
[data-site-refresh-content] .pw .journal--full th, [data-site-refresh-content] .pw .journal--full td { white-space: nowrap; }
[data-site-refresh-content] .pw .journal--full td { height: 48px; }
[data-site-refresh-content] .pw .journal--full th:last-child, [data-site-refresh-content] .pw .journal--full td:last-child { padding-right: 16px; }
[data-site-refresh-content] .pw .journal--full .date span { display: block; font-size: 11px; color: var(--pw-text-3); }
[data-site-refresh-content] .pw .journal--full .num { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-site-refresh-content] .pw .journal--full .num.pos { color: var(--pw-pos); }
[data-site-refresh-content] .pw .journal--full .num.neg { color: var(--pw-neg); }
[data-site-refresh-content] .pw .pill {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
}
[data-site-refresh-content] .pw .pill-strategy { color: #a855f7; background: rgba(168,85,247,.1); }
[data-site-refresh-content] .pw .pill-setup    { color: #f59e0b; background: rgba(245,158,11,.1); }
[data-site-refresh-content] .pw .pill-account  { color: #3b82f6; background: rgba(59,130,246,.1); }

/* три тези під таблицею */
[data-site-refresh-content] .jrn-notes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
  margin-top: var(--sp-8);
}
[data-site-refresh-content] .jrn-note { display: flex; gap: var(--sp-3); }
[data-site-refresh-content] .jrn-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-bright); }
[data-site-refresh-content] .jrn-note span { font-size: var(--fs-14); line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 860px) {
  [data-site-refresh-content] .jrn-notes { grid-template-columns: 1fr; gap: var(--sp-4); }
  [data-site-refresh-content] .jrn-card::after { width: 48px; }
}

/* дрібниці повної таблиці */
[data-site-refresh-content] .pw .journal--full .tid { color: var(--pw-text-2); }
[data-site-refresh-content] .pw .journal--full .muted { color: var(--pw-text-3); }
[data-site-refresh-content] .pw .journal--full .pill { font-size: 12px; }

/* ==========================================================
   Поява віджетів у секціях
   ----------------------------------------------------------
   Той самий підхід, що й у howsGrid: приховані стани вмикає
   клас .ready, рух запускає .in. Без них верстка статична —
   тому нічого не «моргає» до першого показу і при вимкненій
   анімації в системі.
   ========================================================== */

/* --- лінійні графіки: лінія малюється, заливка проявляється --- */
[data-site-refresh-content] .wg.ready .chart .line {
  stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400);
}
[data-site-refresh-content] .wg.ready.in .chart .line { animation: wgDraw 1.5s cubic-bezier(.4,0,.2,1) .1s forwards; }
@keyframes wgDraw { to { stroke-dashoffset: 0; } }

[data-site-refresh-content] .wg.ready .chart path[fill^="url"] { opacity: 0; }
[data-site-refresh-content] .wg.ready.in .chart path[fill^="url"] { animation: wgFade .7s ease .9s forwards; }

/* крапки на точках даних сідають одна за одною, коли лінія їх дійшла */
[data-site-refresh-content] .wg.ready .chart .dot { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
[data-site-refresh-content] .wg.ready.in .chart .dot {
  animation: wgPop .45s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(.35s + var(--d, 0s));
}
@keyframes wgPop { to { opacity: 1; transform: scale(1); } }

/* сітка й підписи осей — тихо проступають першими */
[data-site-refresh-content] .wg.ready .chart .grid, [data-site-refresh-content] .wg.ready .chart .axis { opacity: 0; }
[data-site-refresh-content] .wg.ready.in .chart .grid { animation: wgFade .5s ease forwards; }
[data-site-refresh-content] .wg.ready.in .chart .axis { animation: wgFade .5s ease .12s forwards; }
@keyframes wgFade { to { opacity: 1; } }

/* --- стовпчики ростуть від осі --- */
[data-site-refresh-content] .wg.ready .chart .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
[data-site-refresh-content] .wg.ready.in .chart .bar {
  animation: wgGrow .6s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes wgGrow { to { transform: scaleY(1); } }

/* --- рядки таблиці приїжджають знизу --- */
[data-site-refresh-content] .wg.ready tbody tr { opacity: 0; transform: translateY(8px); }
[data-site-refresh-content] .wg.ready.in tbody tr {
  animation: wgRow .5s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes wgRow { to { opacity: 1; transform: none; } }

/* --- смуга метрик і рахунки --- */
[data-site-refresh-content] .wg.ready .metric-card, [data-site-refresh-content] .wg.ready .capital-overview-item, [data-site-refresh-content] .wg.ready .capital-overview-total {
  opacity: 0; transform: translateY(6px);
}
[data-site-refresh-content] .wg.ready.in .metric-card,
[data-site-refresh-content] .wg.ready.in .capital-overview-item,
[data-site-refresh-content] .wg.ready.in .capital-overview-total {
  animation: wgRow .45s ease forwards; animation-delay: var(--d, 0s);
}

/* --- смужки стратегій розгортаються вбік --- */
[data-site-refresh-content] .wg.ready .strategy-bar-fill { transform: scaleX(0); transform-origin: left; }
[data-site-refresh-content] .wg.ready.in .strategy-bar-fill {
  animation: wgWide .7s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes wgWide { to { transform: scaleX(1); } }

/* --- клітинки календаря спалахують хвилею --- */
[data-site-refresh-content] .wg.ready .cal-day { opacity: 0; transform: scale(.86); }
[data-site-refresh-content] .wg.ready.in .cal-day {
  animation: wgCell .4s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes wgCell { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .wg.ready *, [data-site-refresh-content] .wg.ready.in * { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-site-refresh-content] .wg.ready .chart .line { stroke-dashoffset: 0 !important; }
}

/* ==========================================================
   Відео замість скріншота в секції «Every trade logged»
   ----------------------------------------------------------
   Запис вертикальний (720×824 після обрізання), тож рамка
   тут вужча за сусідні й тримає пропорцію відео — інакше
   довелося б або різати кадр, або лишати чорні поля з боків.
   ========================================================== */
[data-site-refresh-content] .split-frame--video {
  width: 100%; max-width: 470px;
  margin-inline: auto;
  aspect-ratio: 720 / 824;
  padding: 0;
  background: #0d0d0e;
}
[data-site-refresh-content] .split-frame--video video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
/* якщо людина просила менше руху — показуємо постер, відео не крутиться */
@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .split-frame--video video { display: none; }
  [data-site-refresh-content] .split-frame--video {
    background: #0d0d0e url("/site-refresh-20260820/landing/video/trade-note-poster.jpg") center / cover no-repeat;
  }
}

/* ==========================================================
   Тултіп на днях календаря — як у дашборді
   ----------------------------------------------------------
   Значення зняті з живого віджета: підкладка #1a1a1b, рамка
   rgba(255,255,255,.15), тінь 0 10px 25px rgba(0,0,0,.6),
   дата 11/600 #94a3b8, сума 14/700, роздільник #475569,
   кількість угод 12/400 #cbd5e1. Клітинка під курсором
   отримує обведення 2px rgba(255,255,255,.3) і scale(1.05).
   ========================================================== */

/* рамка секції ріже все, що виходить за межі, — для тултіпа знімаємо */
[data-site-refresh-content] .split-frame--live { overflow: visible; }

[data-site-refresh-content] .pw .cal-day { position: relative; transition: transform .15s ease, outline-color .15s ease; }
[data-site-refresh-content] .pw .cal-day[data-tip] { cursor: pointer; }
[data-site-refresh-content] .pw .cal-day[data-tip]:hover {
  outline: 2px solid rgba(255,255,255,.3);
  outline-offset: 0;
  transform: scale(1.05);
  z-index: 5;
}

[data-site-refresh-content] .pw .cal-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 8px;
  background: #1a1a1b; border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 25px rgba(0,0,0,.6);
  white-space: nowrap; text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 20;
}
[data-site-refresh-content] .pw .cal-day:hover .cal-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-site-refresh-content] .pw .cal-tip .d { font-size: 11px; font-weight: 600; color: #94a3b8; }
[data-site-refresh-content] .pw .cal-tip .v { display: flex; align-items: baseline; gap: 6px; }
[data-site-refresh-content] .pw .cal-tip .sum { font-size: 14px; font-weight: 700; }
[data-site-refresh-content] .pw .cal-tip .sum.pos { color: var(--pw-pos); }
[data-site-refresh-content] .pw .cal-tip .sum.neg { color: var(--pw-neg); }
[data-site-refresh-content] .pw .cal-tip .sep { font-size: 12px; color: #475569; }
[data-site-refresh-content] .pw .cal-tip .cnt { font-size: 12px; color: #cbd5e1; }

/* перші два ряди — тултіп знизу, інакше його зріже верх картки */
[data-site-refresh-content] .pw .cal-day.tip-below .cal-tip {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-site-refresh-content] .pw .cal-day.tip-below:hover .cal-tip { transform: translateX(-50%) translateY(0); }

/* крайні колонки — притискаємо тултіп до краю клітинки */
[data-site-refresh-content] .pw .cal-day.tip-start .cal-tip { left: 0; transform: translateX(0) translateY(4px); }
[data-site-refresh-content] .pw .cal-day.tip-start:hover .cal-tip { transform: translateX(0) translateY(0); }
[data-site-refresh-content] .pw .cal-day.tip-end .cal-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
[data-site-refresh-content] .pw .cal-day.tip-end:hover .cal-tip { transform: translateX(0) translateY(0); }


/* ---------- телефон ----------
   Секція журналу малювалась із розрахунку на широкий екран:
   120px згори й знизу плюс 40px під заголовком. На 390px це
   майже пів екрана порожнечі перед таблицею. */
@media (max-width: 900px) {
  [data-site-refresh-content] .jrn { padding: var(--sp-14) 0; }
  [data-site-refresh-content] .jrn-wrap { padding: 0 var(--sp-5); }
  [data-site-refresh-content] .jrn-head { margin-bottom: var(--sp-8); }

  /* Шапка місяця живе поза горизонтальним скролом, тож на 360px
     чотири плашки підсумків просто вилазили за край картки.
     Дозволяємо їм перенестись під назву місяця. */
  [data-site-refresh-content] .pw .month-head { flex-wrap: wrap; gap: var(--sp-2); padding: 12px; }
  [data-site-refresh-content] .pw .month-stats { flex-wrap: wrap; row-gap: 6px; }
}

/* ── вузькі екрани (13.08.2026) ──
   Колонку одноколонкової сітки .split-wrap розпирав не текст, а
   віджет: шапка з контролками і смуга підсумків виплат не
   переносились, min-content колонки ставав ширшим за екран, і
   текст секції різало на 320px. */
[data-site-refresh-content] .split-media { min-width: 0; }
[data-site-refresh-content] .split-frame--live .widget-header { flex-wrap: wrap; }
[data-site-refresh-content] .split-frame--live .widget-controls { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 400px) {
  [data-site-refresh-content] .split-frame--live .payout-totals { grid-template-columns: repeat(2, 1fr); }
}