/* basis-fx tools — 必要証拠金・ロスカット計算ツール固有のスタイル
 * build mc-20260804
 * 共通部分は bfx-base.css。ここにはこのツールにしか出てこないものだけを置く。
 */

/* ---- ロット上限の逆算（3本の比較） ---- */
.bfx-tool .bfx-limits {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--bfx-line); border: var(--bfx-rule) solid var(--bfx-line);
  border-radius: 4px; overflow: hidden; box-shadow: var(--bfx-shadow);
}
.bfx-tool .bfx-limit {
  background: var(--bfx-surface); padding: .9rem 1.1rem;
  display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(5.5rem, auto) minmax(4rem, 1fr);
  align-items: center; gap: .35rem 1.1rem;
}
.bfx-tool .bfx-limit-k { font-size: .88rem; font-weight: 600; color: var(--bfx-ink); }
.bfx-tool .bfx-limit-v {
  font-family: var(--bfx-mono); font-variant-numeric: tabular-nums;
  font-size: 1.2rem; font-weight: 600; text-align: right; color: var(--bfx-ink-soft);
}
.bfx-tool .bfx-limit-v small { font-size: .62em; font-weight: 400; color: var(--bfx-ink-faint); margin-left: .2em; }
.bfx-tool .bfx-limit-bar {
  height: .5rem; background: var(--bfx-surface-alt);
  border: 1px solid var(--bfx-line); border-radius: 2px; overflow: hidden;
}
.bfx-tool .bfx-limit-bar i { display: block; height: 100%; background: var(--bfx-line-strong); }
.bfx-tool .bfx-limit-d { grid-column: 1 / -1; font-size: .82rem; color: var(--bfx-ink-soft); line-height: 1.5; }

/* 3本のうち実際に効く1本（＝一番小さい値）を強調する */
.bfx-tool .bfx-limit.bfx-win .bfx-limit-v { color: var(--bfx-accent); }
.bfx-tool .bfx-limit.bfx-win .bfx-limit-bar i { background: var(--bfx-accent); }
.bfx-tool .bfx-limit.bfx-win .bfx-limit-k::before { content: "\25C6\00A0"; color: var(--bfx-accent); }

/* ---- 結論の1文 ---- */
.bfx-tool .bfx-verdict {
  margin: .9rem 0 0; font-size: .87rem; color: var(--bfx-ink-soft);
  background: var(--bfx-surface); border: var(--bfx-rule) solid var(--bfx-line);
  border-left: 3px solid var(--bfx-accent); border-radius: 3px; padding: .75rem .9rem;
}
.bfx-tool .bfx-verdict b { color: var(--bfx-ink); font-weight: 600; }
.bfx-tool .bfx-verdict .bfx-warn-text { color: var(--bfx-warn); }

/* ---- 表の2段組み（スマホ） ---- */
/* 列幅は「表全体で一番長い値」で決まるため、1セルに横並びで入れた値がそのまま表を押し広げる。
   実測で「損切り30pipsの損失」列だけが 123px あり、6列で 414px 端末に 20px 収まらなかった。 */

/* スマホ専用の2行目。PC には対応する独立した列があるので出さない。
     必要証拠金 の2行目 … 証拠金維持率 */
.bfx-tool .bfx-scroller .bfx-sp-sub { display: none; }
.bfx-tool .bfx-scroller thead th .bfx-sp-sub {
  color: var(--bfx-ink-faint); font-weight: 400; font-size: .92em;
}

/* PC は横並び、スマホは2行目に落とす。列そのものは残す。
     損失額 と 残高比% */
.bfx-tool .bfx-scroller .bfx-stack { display: inline; margin-left: .35em; }

@media (max-width: 640px) {
  .bfx-tool .bfx-limit { grid-template-columns: 1fr auto; }
  .bfx-tool .bfx-limit-bar { grid-column: 1 / -1; }

  .bfx-tool .bfx-scroller .bfx-sp-sub { display: block; }
  .bfx-tool .bfx-scroller .bfx-stack { display: block; margin-left: 0; }
  /* 共通CSSより後に読み込まれるので、同じ詳細度で上書きできる */
  .bfx-tool .bfx-scroller table { font-size: .8rem; }
  .bfx-tool .bfx-scroller thead th { padding-left: .35rem; padding-right: .35rem; }
  .bfx-tool .bfx-scroller tbody td { padding-left: .35rem; padding-right: .35rem; }
}