/* basis-fx tools — 全ツール共通のデザイントークンとレイアウト
 * build bfx-base-20260804
 *
 * 方針:
 * - ライトを基準にする。SWELLはダークモードを標準搭載しておらず data-theme を出さないため、
 *   OS設定(prefers-color-scheme)に追随させると「白い記事の中に黒いツール」が起きる。
 *   ダークはテーマが明示的に data-theme="dark" を立てたときだけ効かせる。
 * - トークンは :root ではなく .bfx-tool に置く。テーマや他プラグインへ漏らさない。
 * - 単位は rem のまま。ルート(通常16px)に追随するので、サイトの文字サイズと歩調が合う。
 */

.bfx-tool {
  --bfx-rule: 1px;
  --bfx-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --bfx-jp: inherit;

  /* SWELL の変数を継承する。単体HTMLでは変数が存在しないのでフォールバックが効く。
     継承するのは文字色とアクセントだけ。--color_bg まで継承すると、サイト背景が白のとき
     ツールの地とパネルが同色になって面が消える。 */
  --bfx-ink:    var(--color_text, #0f1616);
  --bfx-accent: var(--color_main, #086b5f);

  /* 以下は継承しない。面の階層と、意味を持つ色（コントラストを実測して決めた値）。 */
  --bfx-ground:      #f1f4f4;
  --bfx-surface:     #ffffff;
  --bfx-surface-alt: #e7ecec;
  --bfx-band:        #f7f9f9;
  --bfx-line:        #d2dad9;
  --bfx-line-strong: #a9b5b3;
  --bfx-ink-soft:    #45524f;
  --bfx-ink-faint:   #586461;
  /* アクセントの淡色はアクセント本体から作る。--color_main だけ継承して淡色を固定値のままにすると、
     文字が濃紺・背景が緑のような不整合が起きる（実際に起きた）。1行目は color-mix 非対応向け。 */
  --bfx-accent-soft: #d2e9e4;
  --bfx-accent-soft: color-mix(in srgb, var(--bfx-accent) 16%, var(--bfx-surface));
  --bfx-warn:        #8f4c0d;
  --bfx-warn-soft:   #f6e7d4;
  --bfx-danger:      #942628;
  --bfx-danger-soft: #f7dcdc;
  --bfx-shadow:      0 1px 2px rgba(15,22,22,.06), 0 8px 24px -16px rgba(15,22,22,.28);

  color-scheme: light;
  color: var(--bfx-ink);
  font-family: var(--bfx-jp);
  line-height: 1.65;
  max-width: 1240px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* テーマが明示的にダークを立てたときだけ。OS設定では切り替えない。 */
:root[data-theme="dark"] .bfx-tool,
.bfx-tool[data-theme="dark"] {
  --bfx-ink:         var(--color_text, #edf2f2);
  --bfx-accent:      var(--color_main, #57cfba);
  --bfx-ground:      #0f1517;
  --bfx-surface:     #171e21;
  --bfx-surface-alt: #1f282b;
  --bfx-band:        #1b2325;
  --bfx-line:        #2b3639;
  --bfx-line-strong: #465356;
  --bfx-ink-soft:    #b6c2c3;
  --bfx-ink-faint:   #9dabad;
  --bfx-accent-soft: #143b36;
  --bfx-accent-soft: color-mix(in srgb, var(--bfx-accent) 22%, var(--bfx-surface));
  --bfx-warn:        #e0a55c;
  --bfx-warn-soft:   #3a2a17;
  --bfx-danger:      #ef8a8c;
  --bfx-danger-soft: #3d1f20;
  --bfx-shadow:      0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.9);
  color-scheme: dark;
}

.bfx-tool *,
.bfx-tool *::before,
.bfx-tool *::after { box-sizing: border-box; }

/* 日本語の改行位置。既定（line-break: auto）だと小書き仮名や長音符の前でも改行されうる
   （「実効レバレ / ッジ」が実際に起きた）。strict で禁則を効かせる。
   auto-phrase は対応ブラウザで文節の切れ目に寄せる。非対応ブラウザはこの宣言を無視する。 */
.bfx-tool { line-break: strict; }
.bfx-tool .bfx-tagline,
.bfx-tool .bfx-verdict,
.bfx-tool .bfx-alert,
.bfx-tool .bfx-limit-d { word-break: auto-phrase; }

/* 冒頭の説明と「このツールの特徴」は、改行位置を自分で決める。
   auto-phrase は Chrome 系しか対応しておらず、iOS Safari では語の途中で切れる
   （「入力す / るレートは」）。keep-all なら全ブラウザで CJK の文字間の改行を止められるので、
   テンプレート側に置いた <wbr> の位置でだけ折り返す。
   注意: <wbr> と <wbr> の間が画面幅を超えると、はみ出して横スクロールになる。
   320px 端末の本文幅は約 288px（全角20文字）。区切りはこれを超えないこと。 */
.bfx-tool .bfx-lede,
.bfx-tool .bfx-points li { word-break: keep-all; }
/* 数字と助数詞の間の半角スペースなど、切れてほしくない位置をくくるための汎用クラス */
.bfx-tool .bfx-nb { white-space: nowrap; }

/* ---- 見出し ---- */
/* テーマは h2/h3 に帯・罫線・擬似要素で装飾を付けることが多く（SWELLの濃紺の帯がこれ）、
   セレクタの詳細度もテーマ側が上になりやすい（.post_content h2 など）。
   ツール内の見出しは装飾を強制的に落とす。ここは !important を使う価値がある。 */
.bfx-tool h2, .bfx-tool h3, .bfx-tool h4 {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit;
  font-family: inherit;
  text-align: left;
  counter-increment: none;
}
.bfx-tool h2::before, .bfx-tool h2::after,
.bfx-tool h3::before, .bfx-tool h3::after,
.bfx-tool h4::before, .bfx-tool h4::after {
  content: none !important;
  display: none !important;
}

/* 日本語に英字が混ざるラベルなので uppercase は使わない（「1 pip の損益」が
   「1 PIP の損益」になる）。字間も英字大文字前提の値だと日本語が間延びする。 */
.bfx-tool .bfx-eyebrow {
  font-family: var(--bfx-mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--bfx-accent); margin: 0;
}
/* heading="on" のときだけ出る。ページの h1 より小さく保ち、階層が逆転しないようにする。 */
.bfx-tool .bfx-title {
  font-size: 1.35rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.35; margin: 0 0 .5rem;
}
/* 日本語は単語の区切りが無く、ブラウザがほぼ任意の位置で改行する
   （「FX必要証拠金・ロ / スカット計算ツール」になった）。塊ごとに改行を禁止し、
   区切り文字の位置でだけ折り返させる。 */
.bfx-tool .bfx-title span { white-space: nowrap; }
/* h1 の直下に来るので、小さすぎると h1 との間が空いて見える。副題として読める大きさにする。 */
.bfx-tool .bfx-tagline { margin: 0; color: var(--bfx-accent); font-size: 1.05rem; font-weight: 700; }
/* 行長に ch は使わない。ch は「0」の字幅で、日本語フォントでは半角。
   64ch は全角32文字分にしかならず、意図の半分の行長になる（改行が倍に増える）。
   日本語は 1 文字 = 1em なので em で指定する。40em ≒ 全角40文字で、読みやすさの目安に収まる。 */
/* text-wrap: pretty は、最終行に1語だけ残る「泣き別れ」を避けて折り返し位置を調整する。
   非対応ブラウザは無視するだけ。ただし根本策は文章を行長に収めること。 */
/* 1文（44文字）なので、PC では 1 行に収まる幅にする。スマホは画面幅で 2 行になる。 */
.bfx-tool .bfx-lede { margin: .6rem 0 0; color: var(--bfx-ink-soft); font-size: .95rem; max-width: 46em; text-wrap: pretty; }
/* 特徴の説明はツールの下。買い物の邪魔をしないよう、罫線で本体と区切る。 */
.bfx-tool .bfx-about { border-top: 1px solid var(--bfx-line); padding-top: 1.2rem; }
/* 箇条書きは 1 項目 44〜47 文字ある。読み物ではなく短い箇条書きなので、
   文章を削るより行長を合わせるほうがよい。50em で全項目が 1 行に収まる。 */
.bfx-tool .bfx-points {
  margin: .8rem 0 0; padding-left: 1.15rem; max-width: 50em; list-style: disc;
  display: flex; flex-direction: column; gap: .3rem;
  color: var(--bfx-ink-soft); font-size: .88rem;
}
/* 幅が足りず折り返すとき（タブレット・スマホ）は、末尾に数文字だけ残さず
   行の長さを均す。balance は短いブロック向けで、箇条書きに適している。 */
.bfx-tool .bfx-points li { text-wrap: balance; }
.bfx-tool .bfx-points b { color: var(--bfx-ink); font-weight: 600; }
/* 強調した語の途中では折り返さない。用語が2行に割れると意味の塊が壊れる
   （「ロスカット / 価格」のように切れる）。スマホでも掛ける。
   横スクロールを避けるため、ここに入る語は 320px の画面幅に収まる長さにとどめること。
   収まらない長さになる場合は、テンプレート側で <b> を2つに分けて改行できるようにする。 */
.bfx-tool .bfx-lede b,
.bfx-tool .bfx-points b { white-space: nowrap; }
.bfx-tool .bfx-h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; margin: 0; }
.bfx-tool .bfx-h3 { font-size: .92rem; font-weight: 700; margin: 1.4rem 0 .6rem; }

/* ---- 入力パネル ---- */
.bfx-tool .bfx-panel {
  background: var(--bfx-surface); border: var(--bfx-rule) solid var(--bfx-line);
  border-radius: 4px; box-shadow: var(--bfx-shadow);
}
.bfx-tool .bfx-controls {
  padding: 1.15rem 1.25rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 1.1rem;
}
/* UAの [hidden]{display:none} は display:grid に負けるので明示的に打ち消す */
.bfx-tool .bfx-controls[hidden] { display: none; }

.bfx-tool .bfx-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.bfx-tool .bfx-field label {
  font-family: var(--bfx-mono); font-size: .74rem; letter-spacing: .02em;
  color: var(--bfx-ink-faint); font-weight: 400;
}
.bfx-tool .bfx-field input,
.bfx-tool .bfx-field select {
  font-family: var(--bfx-mono); font-variant-numeric: tabular-nums; font-size: .95rem;
  color: var(--bfx-ink); background: var(--bfx-ground);
  border: 1px solid var(--bfx-line); border-radius: 3px;
  padding: .42rem .55rem; width: 100%; height: auto; margin: 0; box-shadow: none;
}
.bfx-tool .bfx-field select { font-family: var(--bfx-jp); }
.bfx-tool .bfx-field input:focus-visible,
.bfx-tool .bfx-field select:focus-visible {
  outline: 2px solid var(--bfx-accent); outline-offset: 1px; border-color: var(--bfx-accent);
}
.bfx-tool .bfx-hint { font-size: .76rem; color: var(--bfx-ink-faint); line-height: 1.4; }

/* 開閉は details/summary ではなく button + hidden。Safari の summary は
   スタイル指定で開閉が効かなくなることがあり、挙動がブラウザ間で揃わない。 */
.bfx-tool .bfx-moreopt-toggle {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 4px;
  padding: .8rem 1.25rem; font-family: var(--bfx-jp); font-size: .85rem; font-weight: 600;
  color: var(--bfx-ink-soft); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bfx-tool .bfx-moreopt-toggle::before { content: "\25B8"; color: var(--bfx-accent); font-size: .8em; margin-right: .5rem; }
.bfx-tool .bfx-moreopt.bfx-open .bfx-moreopt-toggle::before { content: "\25BE"; }
.bfx-tool .bfx-moreopt-toggle:hover { color: var(--bfx-ink); filter: none; }
.bfx-tool .bfx-moreopt .bfx-controls { border-top: 1px solid var(--bfx-line); }

/* ---- 統計カード ---- */
/* 状態表示を上端の帯として取り込み、枠は外側の .bfx-results が持つ。
   独立したテキストとして浮かせず、下の数値の見出しであることを見た目でも示す。 */
.bfx-tool .bfx-results {
  border: var(--bfx-rule) solid var(--bfx-line); border-radius: 4px;
  overflow: hidden; box-shadow: var(--bfx-shadow);
}
.bfx-tool .bfx-results .bfx-eyebrow {
  background: var(--bfx-surface-alt); padding: .5rem .95rem;
  border-bottom: 1px solid var(--bfx-line);
}
/* auto-fit だと幅次第で4列になり、カード6枚だと右下に2枚分の空きが出る。
   6 = 3×2 = 2×3 なので、列数を固定すればどの幅でもきれいに埋まる。 */
.bfx-tool .bfx-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--bfx-line); border: 0;
}
.bfx-tool .bfx-stat { background: var(--bfx-surface); padding: .95rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.bfx-tool .bfx-stat-k { font-family: var(--bfx-mono); font-size: .74rem; letter-spacing: .02em; color: var(--bfx-ink-faint); }
.bfx-tool .bfx-stat-v { font-family: var(--bfx-mono); font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.bfx-tool .bfx-stat-v small { font-size: .68em; font-weight: 400; color: var(--bfx-ink-soft); margin-left: .15em; }
.bfx-tool .bfx-stat-note { font-family: var(--bfx-mono); font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--bfx-ink-faint); }
.bfx-tool .bfx-stat.bfx-hot .bfx-stat-v { color: var(--bfx-warn); }
.bfx-tool .bfx-stat.bfx-bad .bfx-stat-v { color: var(--bfx-danger); }
.bfx-tool .bfx-stat.bfx-good .bfx-stat-v { color: var(--bfx-accent); }

/* ---- タブ ---- */
/* 下線だけのタブは「押せる」ことが伝わらず、とくにスマホでは見出しの一部に見える。
   枠と地色を持つセグメント型にして、器の中で選択中だけが浮いて見える形にする。 */
.bfx-tool .bfx-tabs {
  display: grid; grid-auto-flow: column; width: fit-content; gap: .25rem;
  background: var(--bfx-surface-alt); border: var(--bfx-rule) solid var(--bfx-line);
  border-radius: 5px; padding: .25rem; margin-bottom: .95rem;
}
.bfx-tool .bfx-tab {
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  color: var(--bfx-ink-soft); font-family: var(--bfx-jp); font-size: .88rem; font-weight: 600;
  padding: .5rem .85rem; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.bfx-tool .bfx-tab:hover { color: var(--bfx-ink); background: var(--bfx-surface); filter: none; }
.bfx-tool .bfx-tab[aria-selected="true"] {
  color: var(--bfx-accent); background: var(--bfx-surface);
  border-color: var(--bfx-line); box-shadow: var(--bfx-shadow);
}
.bfx-tool .bfx-tab:focus-visible { outline: 2px solid var(--bfx-accent); outline-offset: -1px; }
.bfx-tool .bfx-tabpanel[hidden] { display: none; }

/* ---- 見出し行と凡例 ---- */
.bfx-tool .bfx-table-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.bfx-tool .bfx-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .82rem; color: var(--bfx-ink-soft); }
.bfx-tool .bfx-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bfx-tool .bfx-swatch { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; flex: none; }
.bfx-tool .bfx-swatch-w { background: var(--bfx-warn-soft); border: 1px solid var(--bfx-warn); }
.bfx-tool .bfx-swatch-m { background: var(--bfx-accent-soft); border: 1px solid var(--bfx-accent); }
.bfx-tool .bfx-swatch-d { background: var(--bfx-danger-soft); border: 1px solid var(--bfx-danger); }

/* ---- 通知 ---- */
.bfx-tool .bfx-alert {
  font-size: .84rem; color: var(--bfx-warn); background: var(--bfx-warn-soft);
  border: 1px solid var(--bfx-warn); border-radius: 3px; padding: .6rem .8rem; margin: 0;
}
.bfx-tool .bfx-alert.bfx-stop { color: var(--bfx-danger); background: var(--bfx-danger-soft); border-color: var(--bfx-danger); }
/* 異常ではなく「そういう条件です」と伝えるための情報色 */
.bfx-tool .bfx-alert.bfx-info { color: var(--bfx-accent); background: var(--bfx-accent-soft); border-color: var(--bfx-accent); }
.bfx-tool .bfx-alert[hidden] { display: none; }

/* ---- 表 ---- */
/* 見出し2行 + 明細20行がちょうど収まる高さ。vh だと画面の高さで行数が変わるため実寸で決める。
   明細1行 = 1rem × 1.4 + 上下 .32rem × 2 = 2.04rem
   見出し2行 = .8rem × 1.4 × 2 + 上下 .6rem × 2 = 3.44rem（＋下罫線 1px）
   見出しは折り返す前提なので、th 側でも同じ高さを固定しておく（下記）。
   固定しないと幅によって 1 行 / 2 行が変わり、この計算が狂う。 */
.bfx-tool .bfx-scroller {
  overflow: auto; max-height: calc(3.44rem + 2.04rem * 20 + 1px);
  border: var(--bfx-rule) solid var(--bfx-line); border-radius: 4px;
  background: var(--bfx-surface); box-shadow: var(--bfx-shadow);
}
.bfx-tool .bfx-scroller table {
  border-collapse: separate; border-spacing: 0; width: 100%; margin: 0;
  font-family: var(--bfx-mono); font-variant-numeric: tabular-nums;
  font-size: 1rem; line-height: 1.4; white-space: nowrap;
}
/* 見出しの文字数がそのまま列幅の下限になるため、長い見出し（「損切り 30pips の損失」など）が
   表全体を横に押し広げていた。th だけ折り返しを許可して列を細くする。
   折り返す位置は JS 側のラベルに <br> を入れて明示する（自動任せだと意味の切れ目で切れない）。
   td は数値なので nowrap のまま。 */
.bfx-tool .bfx-scroller thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bfx-surface-alt); color: var(--bfx-ink-soft);
  font-weight: 600; font-size: .8rem; letter-spacing: .02em;
  /* 2行になる見出しは右揃えだと不揃いに見えるので中央寄せ。
     下端を揃えることで、1行の見出しと2行の見出しが同じ基線に並ぶ。 */
  white-space: normal; height: 3.44rem; vertical-align: bottom;
  text-align: center; padding: .6rem .65rem; border: 0; border-bottom: 1px solid var(--bfx-line-strong);
  /* テーマは本文の折り返しに break-all 系を掛けることがあり、th がそれを継ぐと
     「発注 L / ot」「ロス / カット / まで p / ips」のように語の途中で切れる。
     切れる位置は JS 側のラベルに入れた <br> だけに限定する。
     見出しが3行以上に伸びると、下の 20 行ぶんの高さ計算も同時に狂う。 */
  word-break: keep-all; overflow-wrap: normal;
}
.bfx-tool .bfx-scroller thead th:first-child { left: 0; z-index: 3; }
.bfx-tool .bfx-scroller tbody tr { background: var(--bfx-surface); }
.bfx-tool .bfx-scroller tbody tr.bfx-band { background: var(--bfx-band); }
.bfx-tool .bfx-scroller tbody tr:hover { background: var(--bfx-surface-alt); }
/* 左右の余白は列数ぶん効いてくる。10列を超える表があるので、1rem では PC でも横スクロールになる。
   上下は変えないこと（明細1行 = 2.04rem という .bfx-scroller の高さ計算の前提）。 */
.bfx-tool .bfx-scroller tbody td { background: inherit; padding: .32rem .65rem; text-align: right; color: var(--bfx-ink); border: 0; }
.bfx-tool .bfx-scroller tbody tr.bfx-rule td { border-bottom: 1px solid var(--bfx-line-strong); }

.bfx-tool .bfx-scroller td.bfx-key { position: sticky; left: 0; z-index: 1; color: var(--bfx-ink-soft); border-right: 1px solid var(--bfx-line); font-weight: 600; }
.bfx-tool .bfx-scroller td.bfx-soft { color: var(--bfx-ink-soft); }
.bfx-tool .bfx-scroller td.bfx-sub,
.bfx-tool .bfx-scroller td.bfx-state { color: var(--bfx-ink-faint); }
.bfx-tool .bfx-scroller tbody td span.bfx-sub { color: var(--bfx-ink-faint); font-size: .88em; }
.bfx-tool .bfx-scroller tbody tr:hover td.bfx-sub { color: var(--bfx-ink-soft); }
.bfx-tool .bfx-scroller td.bfx-hit { color: var(--bfx-accent); background: var(--bfx-accent-soft); font-weight: 700; box-shadow: inset 1px 0 var(--bfx-line), inset -1px 0 var(--bfx-line); }
.bfx-tool .bfx-scroller td.bfx-tight { color: var(--bfx-danger); font-weight: 600; }
.bfx-tool .bfx-scroller td.bfx-over { color: var(--bfx-warn); background: var(--bfx-warn-soft); }

/* 行側の色指定はセル側より詳細度が高いので、警告色は明示的に書き戻す */
.bfx-tool .bfx-scroller tbody tr.bfx-cur { background: var(--bfx-accent-soft); }
.bfx-tool .bfx-scroller tbody tr.bfx-cur td { color: var(--bfx-ink); font-weight: 600; }
.bfx-tool .bfx-scroller tbody tr.bfx-cur td.bfx-key { color: var(--bfx-accent); }
.bfx-tool .bfx-scroller tbody tr.bfx-cur td.bfx-tight { color: var(--bfx-danger); }
.bfx-tool .bfx-scroller tbody tr.bfx-cur td.bfx-over { color: var(--bfx-warn); }
.bfx-tool .bfx-scroller tbody tr.bfx-dead { background: var(--bfx-danger-soft); }
.bfx-tool .bfx-scroller tbody tr.bfx-dead td { color: var(--bfx-danger); }
/* 状態列の文字だけだと帯が目に入らず、凡例の色見本とも一致しない。行ごと塗る。 */
.bfx-tool .bfx-scroller tbody tr.bfx-warnrow { background: var(--bfx-warn-soft); }
.bfx-tool .bfx-scroller tbody tr.bfx-warnrow td.bfx-state { color: var(--bfx-warn); }

/* ---- ボタン ---- */
.bfx-tool .bfx-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bfx-tool .bfx-btn {
  font-family: var(--bfx-jp); font-size: .85rem; font-weight: 600;
  color: var(--bfx-surface); background: var(--bfx-accent);
  border: 1px solid var(--bfx-accent); border-radius: 3px;
  padding: .5rem 1rem; cursor: pointer; line-height: 1.4; text-decoration: none;
}
.bfx-tool .bfx-btn.bfx-ghost { background: transparent; color: var(--bfx-accent); }
.bfx-tool .bfx-btn:hover { filter: brightness(1.08); }
.bfx-tool .bfx-btn:focus-visible { outline: 2px solid var(--bfx-accent); outline-offset: 2px; }

/* ---- 前提・注記 ---- */
.bfx-tool .bfx-notes { border-top: 1px solid var(--bfx-line); padding: 1.15rem 1.25rem; font-size: .85rem; color: var(--bfx-ink-soft); display: flex; flex-direction: column; gap: .5rem; }
/* .bfx-notes の display:flex は UA の [hidden]{display:none} に勝つので明示的に打ち消す */
.bfx-tool .bfx-notes[hidden] { display: none; }
.bfx-tool .bfx-notes .bfx-notes-h { font-size: .85rem; letter-spacing: .02em; color: var(--bfx-ink); font-weight: 700; margin: .9rem 0 0; }
.bfx-tool .bfx-notes .bfx-notes-h:first-of-type { margin-top: 0; }
.bfx-tool .bfx-notes ul { padding-left: 1.1rem; margin: 0; list-style: disc; display: flex; flex-direction: column; gap: .3rem; }
.bfx-tool .bfx-notes li { margin: 0; }
/* <b> は項目のラベル、<strong> は読み落としてほしくない主張。見た目は同じでよい
   （量を絞ったことで読みやすさは確保できる）が、読み上げソフトには違いが伝わる。 */
.bfx-tool .bfx-notes b,
.bfx-tool .bfx-notes strong { color: var(--bfx-ink); font-weight: 600; }
/* 記法は強調ではなく記号。太字ではなく等幅で示す。 */
.bfx-tool .bfx-code {
  font-family: var(--bfx-mono); font-size: .92em; white-space: nowrap;
  background: var(--bfx-ground); border: 1px solid var(--bfx-line);
  border-radius: 3px; padding: .05em .35em;
}
.bfx-tool .bfx-formula {
  font-family: var(--bfx-mono); font-size: .8rem; color: var(--bfx-ink);
  /* パネルの中に入ったので、面と同色だと沈む。地色側にして凹んで見せる。 */
  background: var(--bfx-ground); border: 1px solid var(--bfx-line);
  border-left: 3px solid var(--bfx-accent); border-radius: 3px;
  padding: .6rem .8rem; overflow-x: auto; white-space: pre;
}

/* ---- 上部リンク行 ---- */
/* 「他にもツールがある」ことを、計算を始める前に知らせるためだけの行。
   説明文を持たないので高さは1行ぶん。カードを上に置くと入力欄が画面外に押し出される。
   件数はPHP側で絞る（増えるとスマホで折り返す）。それでも折り返せるようにはしておく。 */
.bfx-tool .bfx-quicknav {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem;
  margin: 0; padding: .5rem 0;
  border-top: var(--bfx-rule) solid var(--bfx-line);
  border-bottom: var(--bfx-rule) solid var(--bfx-line);
  font-size: .82rem;
}
.bfx-tool .bfx-quicknav__label { color: var(--bfx-ink-faint); }
.bfx-tool .bfx-quicknav a { color: var(--bfx-accent); text-decoration: none; font-weight: 600; }
.bfx-tool .bfx-quicknav a:hover { text-decoration: underline; }
.bfx-tool .bfx-quicknav a:focus-visible { outline: 2px solid var(--bfx-accent); outline-offset: 2px; }
/* リンク名の途中では折り返さない。短縮名なので 320px でも収まる */
.bfx-tool .bfx-quicknav__link { white-space: nowrap; }
/* 一覧への導線。個別ツールと区別が付くよう、色を落として矢印を添える。
   直前の `.bfx-quicknav a` より詳細度を上げる必要があるので、型セレクタを挟む。 */
.bfx-tool .bfx-quicknav a.bfx-quicknav__all {
  margin-left: auto; white-space: nowrap;
  color: var(--bfx-ink-soft); font-weight: 400;
}
.bfx-tool .bfx-quicknav__all::after { content: "\00A0\2192"; }

/* スマホでは「他のツール」を1行目に独立させ、リンクを2行目に並べる。
   当初は幅を稼ぐためにラベルを消していたが、**それだと他ツール名と「一覧」だけが
   脈絡なく現れる形になり、何のリンクか分からない**（実機で確認）。
   ラベルを行として立てれば意味が通り、リンク側も横幅をすべて使えるようになる。 */
@media (max-width: 480px) {
  .bfx-tool .bfx-quicknav { gap: .2rem .7rem; }
  .bfx-tool .bfx-quicknav__label { flex-basis: 100%; font-size: .78rem; }
  .bfx-tool .bfx-quicknav a.bfx-quicknav__all { margin-left: auto; }
}

/* ---- ツールナビ ---- */
.bfx-tool-nav { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
.bfx-tool-nav__block { display: flex; flex-direction: column; gap: .7rem; }
.bfx-tool-nav__title { font-size: .95rem; font-weight: 700; margin: 0; }
.bfx-tool-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem;
}
.bfx-tool-nav__item { margin: 0; }
.bfx-tool-nav__card {
  display: flex; flex-direction: column; gap: .2rem; height: 100%;
  background: var(--bfx-surface, #fff); border: var(--bfx-rule, 1px) solid var(--bfx-line, #d2dad9);
  border-radius: 4px; padding: .8rem .95rem; text-decoration: none;
}
.bfx-tool-nav__card:hover { border-color: var(--bfx-accent, #086b5f); }
.bfx-tool-nav__card:focus-visible { outline: 2px solid var(--bfx-accent, #086b5f); outline-offset: 2px; }
.bfx-tool-nav__name { font-size: .9rem; font-weight: 700; color: var(--bfx-accent, #086b5f); }
.bfx-tool-nav__summary { font-size: .82rem; color: var(--bfx-ink-soft, #45524f); line-height: 1.5; }

/* ---- 著作権表示 ---- */
.bfx-colophon {
  border-top: var(--bfx-rule) solid var(--bfx-line);
  padding-top: 1rem; display: flex; flex-direction: column; gap: .35rem;
  font-size: .82rem; color: var(--bfx-ink-faint);
}
.bfx-colophon p { margin: 0; }

/* ---- 中間幅 ---- */
/* 記事の中に置くとコンテナは 800〜1000px 程度になる。スマホ用の 640px まで
   何も手当てが無いと、この帯で列がはみ出す。列は落とさず余白だけ詰める。 */
@media (max-width: 1100px) {
  .bfx-tool .bfx-scroller thead th { padding-left: .45rem; padding-right: .45rem; }
  .bfx-tool .bfx-scroller tbody td { padding-left: .45rem; padding-right: .45rem; }
}
/* 6枚を 3+3 → 2+2+2 に。どちらも余りが出ない。 */
@media (max-width: 900px) {
  .bfx-tool .bfx-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- スマホ ---- */
.bfx-tool .bfx-lbl-sp { display: none; }

@media (max-width: 640px) {
  /* iOS Safari は 16px 未満の入力欄にフォーカスすると勝手にページを拡大し、そのまま戻らない */
  .bfx-tool .bfx-field input,
  .bfx-tool .bfx-field select { font-size: 16px; }

  .bfx-tool .bfx-pc-only { display: none; }
  .bfx-tool .bfx-lbl-pc  { display: none; }
  .bfx-tool .bfx-lbl-sp  { display: inline; }

  .bfx-tool .bfx-scroller table { font-size: .82rem; }
  /* スマホは短いラベル（.bfx-lbl-sp）に切り替わり 1 行で収まるので、2 行分の固定高さは外す。
     高さ固定の目的は「明細ちょうど20行」の計算を保つことだが、スマホは 70vh 基準なので不要。 */
  .bfx-tool .bfx-scroller thead th { padding: .5rem .45rem; font-size: .7rem; height: auto; }
  .bfx-tool .bfx-scroller tbody td { padding: .34rem .45rem; }
  .bfx-tool .bfx-scroller { max-height: 70vh; }
  .bfx-tool .bfx-notes { padding: 0 1rem 1rem; }

  /* 画面幅いっぱいに3等分。器の幅＝押せる範囲であることを分かりやすくする */
  .bfx-tool .bfx-tabs { width: 100%; grid-auto-columns: 1fr; }
  .bfx-tool .bfx-tab { padding: .55rem .3rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bfx-tool * { transition: none !important; animation: none !important; }
}