/* ============================================================
   BitStat — секція «Як це працює»
   ------------------------------------------------------------
   Три кроки, але замість голого тексту в кожній картці —
   маленький фрагмент справжнього інтерфейсу. Крок «Connect»
   показує форму ключа, «Trade» — рядки угод, які додаються самі,
   «Review» — криву капіталу. Показуємо продукт, а не переказуємо
   його словами.

   Анімація влаштована так само, як у сітці віджетів: приховані
   стани вмикаються лише класом .ready, який ставить JS і тільки
   коли сторінка справді видима. Якщо JS не спрацює або вкладка
   у фоні — вміст просто видно. Анімація ніколи не є причиною
   порожнього блоку.
   ============================================================ */

[data-site-refresh-content] .hows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  counter-reset: hw;
}

[data-site-refresh-content] .hw {
  position: relative;
  counter-increment: hw;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  transition: border-color .22s ease, transform .22s ease;
}
[data-site-refresh-content] .hw:hover { border-color: var(--border-light); transform: translateY(-2px); }

/* стрілка у проміжку між картками */
[data-site-refresh-content] .hw + .hw::before {
  content: "";
  position: absolute;
  top: 46px; left: calc(var(--sp-6) * -1 - 5px);
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--border-light);
  border-right: 1.5px solid var(--border-light);
  transform: rotate(45deg);
}

/* ---------- шапка картки ---------- */
[data-site-refresh-content] .hw-hd { display: flex; align-items: center; gap: var(--sp-3); }
[data-site-refresh-content] .hw-n {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-bg); color: var(--accent-bright);
  font-size: var(--fs-13); font-weight: 700;
}
[data-site-refresh-content] .hw-n::before { content: counter(hw); }
[data-site-refresh-content] .hw h3 { margin: 0; font-size: var(--fs-17); font-weight: 700; color: var(--text-primary); }
[data-site-refresh-content] .hw > p {
  margin: var(--sp-3) 0 var(--sp-6);
  font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted);
}

/* ---------- панель з фрагментом інтерфейсу ---------- */
[data-site-refresh-content] .hw-vis {
  margin-top: auto;
  min-height: 224px;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  overflow: hidden;
}

/* — крок 1: підключення ключа — */
[data-site-refresh-content] .hw-field {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
}
[data-site-refresh-content] .hw-field + .hw-field { margin-top: var(--sp-2); }
/* маленька плашка з фірмовим знаком; словесну назву лишаємо поруч —
   самі знаки на 22 пікселях не читаються без підпису */
[data-site-refresh-content] .hw-logo {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  object-fit: cover;   /* логотипи вже квадратні іконки-плитки */
}

[data-site-refresh-content] .hw-ex {
  flex: 0 0 auto;
  font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary);
}
[data-site-refresh-content] .hw-key {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-12); color: var(--text-muted);
  letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
[data-site-refresh-content] .hw-check {
  flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-bg); color: var(--accent-bright);
}
[data-site-refresh-content] .hw-check svg { width: 10px; height: 10px; }
[data-site-refresh-content] .hw-tag {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;   /* панель — flex-колонка, інакше плашка розтягнеться */
  margin-top: var(--sp-3);
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--green-bg); color: var(--accent-bright);
  font-size: var(--fs-11); font-weight: 600;
}
[data-site-refresh-content] .hw-tag svg { width: 11px; height: 11px; }

/* — крок 2: угоди, що додаються самі — */
[data-site-refresh-content] .hw-trade {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-13);
}
[data-site-refresh-content] .hw-trade:last-child { border-bottom: 0; padding-bottom: 0; }
[data-site-refresh-content] .hw-trade:first-child { padding-top: 0; }
[data-site-refresh-content] .hw-side {
  flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
}
[data-site-refresh-content] .hw-side.long  { background: var(--accent-bright); }
[data-site-refresh-content] .hw-side.short { background: var(--status-negative); }
[data-site-refresh-content] .hw-sym { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); font-weight: 500; }
[data-site-refresh-content] .hw-pnl { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-site-refresh-content] .hw-pnl.pos { color: var(--accent-bright); }
[data-site-refresh-content] .hw-pnl.neg { color: var(--status-negative); }

/* — крок 3: підсумок тижня, зібраний як віджет дашборда — */
[data-site-refresh-content] .hw-hero {
  padding: 9px 12px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-12);
}
[data-site-refresh-content] .hw-hero-label {
  display: block;
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
[data-site-refresh-content] .hw-hero-row {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-top: 3px;
}
[data-site-refresh-content] .hw-hero-amount {
  font-size: var(--fs-20); font-weight: 700; color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
[data-site-refresh-content] .hw-hero-badge {
  padding: 2px 7px; border-radius: 6px;
  font-size: var(--fs-11); font-weight: 600; color: var(--accent-bright);
  background: var(--green-bg); border: 1px solid rgba(60,217,122,.22);
}

[data-site-refresh-content] .hw-curve { display: block; width: 100%; height: 68px; margin-top: var(--sp-3); }
[data-site-refresh-content] .hw-grid { stroke: rgba(255,255,255,.05); stroke-width: 1; }
[data-site-refresh-content] .hw-curve-fill { fill: url(#hwFill); }
[data-site-refresh-content] .hw-curve-line {
  fill: none; stroke: var(--accent-bright); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* підпис під кривою — дві метрики, як у віджеті P&L Analysis */
[data-site-refresh-content] .hw-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-11); color: var(--text-muted);
}
[data-site-refresh-content] .hw-foot b { font-weight: 600; color: var(--text-secondary); }

/* ---------- телефон ----------
   Три колонки по ~100px перетворювали опис кроку на стовпчик
   з одного слова в рядок. Розкладаємо кроки один під одним,
   а стрілку між картками повертаємо згори вниз. */
@media (max-width: 860px) {
  /* minmax(0,1fr), не 1fr: інакше min-content кривої капіталу
     роздуває колонку до 310px і картки вилазять на 320px екрані */
  [data-site-refresh-content] .hows { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  [data-site-refresh-content] .hw { padding: var(--sp-5); }
  [data-site-refresh-content] .hw + .hw::before {
    top: calc(var(--sp-5) * -1 + 4px);
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* крок 3 (12–13.08.2026): справжня крива балансу з канонічного
   віджета замість намальованої – цифри картки тепер сходяться
   з рештою сайту ($102,812.40, +3.80%, вінрейт 53.33%) */
[data-site-refresh-content] .hw-balance { margin: var(--sp-2) 0; }
[data-site-refresh-content] .hw-balance .chart { display: block; width: 100%; height: auto; }