/* ea-miner.css — /strategy-miner (生成と保管庫だけの専用ページ)。
 * 色・角・影は fx-tools-common.css の --sft-* トークンだけを使う (Builder と同じ家族・ライト/ダークは data-sft-theme が切り替える)。
 * ボタン・入力欄・表・生成器の部品の見た目は ea-builder.css (.eab-*) をそのまま使い、ここにはこのページの並べ方だけを書く。
 * .eab-wrapper (100vh・overflow hidden) は使わない = ページ全体が普通にスクロールする。 */
.eam-body { margin: 0; min-height: 100vh; background: var(--sft-bg); color: var(--sft-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.asm-mark { flex: none; }
.eab-logo-acc { color: var(--sft-primary-text); font-weight: inherit; }
a.eam-logo { text-decoration: none; color: inherit; }
.eam-logo .eab-logo { display: inline-flex; align-items: center; gap: 8px; }

/* ── ヘッダー ── */
.eam-header {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 6px 16px;
    background: var(--sft-bg-card); border-bottom: 1px solid var(--sft-border);
    position: sticky; top: 0; z-index: 50;
}
.eam-nav { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--sft-border); border-radius: 8px; }
.eam-nav-item { padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--sft-text-secondary); text-decoration: none; border-radius: 6px; }
.eam-nav-item:hover { color: var(--sft-text); }
.eam-nav-item.is-active { background: var(--sft-primary); color: var(--sft-on-primary); }
.eam-nav-item:focus-visible, .eam-logo:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: 2px; }
.eam-header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.eam-langsel { max-width: 120px; min-height: 32px; padding: 3px 6px; font-size: 12px; color: var(--sft-text-primary); background: var(--sft-bg-card); border: 1px solid var(--sft-border); border-radius: 6px; }

/* ── 本文 ── */
.eam-main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; }
.eam-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.eam-lead { margin: 0 0 16px; max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--sft-text-secondary); }

/* 生成の帯: 通貨・足・年数・方向・試行数・[詳細設定▸][▶生成] を 1 行 (狭い幅では折り返す) */
.eam-band { margin: 0 0 20px; padding: 14px 16px; background: var(--sft-bg-card); border: 1px solid var(--sft-border); border-radius: var(--sft-radius-md); box-shadow: var(--sft-card-shadow); }
.eam-band-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.eam-f { margin: 0; flex: 1 1 130px; min-width: 110px; max-width: 200px; }
.eam-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.eam-run { padding: 8px 18px; font-size: 13px; font-weight: 700; }
.eam-loop { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.eam-loop input { width: auto; }
.eam-loop-line { margin: 6px 0 0; }
.eam-band .eab-btn { min-height: 36px; justify-content: center; }
.eam-more { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--sft-border); }

.eam-band .eab-gen-progress { margin: 12px 0 4px; }
.eam-band #eab-gen-result { margin-top: 10px; }

/* ── 保管庫 ── */
.eam-vault-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.eam-vault-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.eam-count { font-size: 12px; color: var(--sft-text-secondary); font-variant-numeric: tabular-nums; }
.eam-lock { margin: 0 0 12px; padding: 14px 16px; border: 1px dashed var(--sft-border); border-radius: var(--sft-radius-md); background: var(--sft-bg-alt); }
.eam-lock p { margin: 0 0 10px; line-height: 1.6; }
.eam-lock p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eam-lock a.eab-btn { text-decoration: none; }

.eam-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 10px; }
.eam-ff { display: flex; flex-direction: column; gap: 3px; flex: 1 1 110px; min-width: 96px; max-width: 170px; font-size: 11px; color: var(--sft-text-secondary); }
.eam-ff input, .eam-ff select {
    width: 100%; box-sizing: border-box; min-height: 34px; padding: 5px 8px; font-size: 13px;
    background: var(--sft-input-bg); color: var(--sft-text); border: 1.5px solid var(--sft-border); border-radius: 6px;
}
.eam-ff input:focus, .eam-ff select:focus { outline: none; border-color: var(--sft-primary); background: var(--sft-input-focus-bg); }
.eam-ff-reset { min-height: 34px; }

/* 選んだ物の操作列: 何も選んでいないときは薄く (ボタンは無効) */
.eam-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--sft-border); border-radius: 8px; background: var(--sft-bg-alt); }
.eam-selbar-on { border-color: var(--sft-primary); background: var(--sft-primary-bg); }
.eam-selcount { margin-right: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eam-selbar .eab-btn { min-height: 34px; }

.eam-tablewrap { overflow-x: auto; border: 1px solid var(--sft-border); border-radius: var(--sft-radius-md); background: var(--sft-bg-card); }
.eam-table { min-width: 560px; font-size: 13px; }
.eam-table th, .eam-table td { padding: 8px 10px; white-space: nowrap; }
.eam-table th { position: sticky; top: 0; background: var(--sft-bg-card); }
.eam-table th, .eam-table td { text-align: start; }
.eam-table td.eam-num, .eam-table th.eam-num { text-align: end; font-variant-numeric: tabular-nums; }
.eam-table .eam-c-sel { width: 36px; text-align: center; padding-left: 8px; padding-right: 4px; }
.eam-table .eam-c-name { text-align: start; }
.eam-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sft-primary); cursor: pointer; }
.eam-th { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: 11px; color: var(--sft-text-secondary); cursor: pointer; letter-spacing: .2px; }
.eam-th:hover { color: var(--sft-text); }
.eam-th:focus-visible, .eam-name:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: 2px; border-radius: 3px; }
th[aria-sort="ascending"] .eam-th::after { content: " \25B2"; font-size: 9px; }
th[aria-sort="descending"] .eam-th::after { content: " \25BC"; font-size: 9px; }
th[aria-sort="ascending"] .eam-th, th[aria-sort="descending"] .eam-th { color: var(--sft-primary-text); }
.eam-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--sft-primary-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.eam-when-cell { font-size: 12px; color: var(--sft-text-secondary); }
.eam-none { color: var(--sft-text-muted); }
th.eam-c-eq, td.eam-c-eq { width: 100px; }
.eam-table th[data-col] { font-weight: 600; font-size: 11px; color: var(--sft-text-secondary); letter-spacing: .2px; }
.eam-table th.eam-c-eq, .eam-table td.eam-c-eq { text-align: center; }
/* 表の左 2 列 (選択・戦略 #) は横にスクロールしても残す */
.eam-table .eam-c-sel, .eam-table .eam-c-name { position: sticky; z-index: 1; background: var(--sft-bg-card); }
.eam-table .eam-c-sel { inset-inline-start: 0; }
.eam-table .eam-c-name { inset-inline-start: 36px; }
.eam-table thead th.eam-c-sel, .eam-table thead th.eam-c-name { z-index: 2; }
.eam-table tbody tr:hover td.eam-c-sel, .eam-table tbody tr:hover td.eam-c-name { background: var(--sft-bg-hover); }
.eam-table tbody tr.eam-row-new td.eam-c-sel, .eam-table tbody tr.eam-row-new td.eam-c-name { background: var(--sft-primary-bg); }

/* 損益曲線の小さな図: 1 本の線 (色は文字用トークン = 地とのコントラストを確保) と終点の点 */
.eam-spark { display: block; overflow: visible; }
.eam-spark polyline { stroke: var(--sft-primary-text); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.eam-spark circle { fill: var(--sft-primary-text); stroke: var(--sft-bg-card); stroke-width: 1.5; }
.eam-spark-big { width: 100%; height: 150px; }
.eam-spark-big polyline { stroke-width: 2; }
.eam-spark-zero { stroke: var(--sft-border); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.eam-eqfig { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--sft-border); border-radius: 8px; background: var(--sft-bg-alt); }
.eam-eqfig figcaption { margin-top: 4px; font-size: 12px; color: var(--sft-text-secondary); font-variant-numeric: tabular-nums; }

/* 組み合わせ (ea-portfolio.js): 合計の損益曲線 (太い線) と各本 (細い線)・数字の札・重みと相関の表 */
.eam-pf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eam-pf-head .eam-detail-title { margin: 0; }
.eam-pf-ctl { margin-top: 10px; }
.eam-pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0 0 12px; }
.eam-pf-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--sft-border); border-radius: 8px; background: var(--sft-bg-alt); }
.eam-pf-tl { font-size: 11px; color: var(--sft-text-secondary); }
.eam-pf-tv { font-size: 17px; font-variant-numeric: tabular-nums; }
.eam-spark polyline.eam-pf-line { stroke: var(--sft-text-muted); stroke-width: 1.25; opacity: .75; stroke-linejoin: round; }
.eam-spark polyline.eam-pf-line.eam-pf-main { stroke: var(--sft-primary-text); stroke-width: 2.5; opacity: 1; }
.eam-pf-svg { height: 190px; }
.eam-pf-h { margin: 14px 0 6px; font-size: 14px; }
.eam-pf-fine { margin: 8px 0 0; font-size: 12px; }
.eam-pf-members, .eam-pf-corr { min-width: 0; }
.eam-pf-off td { color: var(--sft-text-muted); }
.eam-pf-win { width: 80px; min-height: 30px; padding: 3px 6px; font-size: 13px; text-align: end; color: var(--sft-text); background: var(--sft-input-bg); border: 1.5px solid var(--sft-border); border-radius: 6px; }
.eam-pf-sample { margin-top: 12px; opacity: .92; }
.eam-pf-sample .eam-detail-title { margin-bottom: 4px; }
.eam-lock .eam-pf-sample p:last-child { display: block; margin: 8px 0 0; }

/* パラメータ最適化 (ea-miner-opt.js): 候補カードの区画・範囲の表・比較表・台地の地図 */
.eam-opt { margin-top: 8px; }
.eam-opt-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sft-border); min-width: 0; }
.eam-opt-h { margin: 14px 0 6px; font-size: 14px; }
.eam-opt-in { width: 84px; min-height: 30px; padding: 3px 6px; font-size: 13px; text-align: end; color: var(--sft-text); background: var(--sft-input-bg); border: 1.5px solid var(--sft-border); border-radius: 6px; }
.eam-opt-ctl { margin-top: 10px; }
.eam-opt-size { margin-top: 8px; }
.eam-opt-actions, .eam-opt-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.eam-opt-sub { color: var(--sft-text-secondary); font-size: 12px; }
.eam-opt-picked th, .eam-opt-picked td { background: color-mix(in srgb, var(--sft-primary) 10%, transparent); }
.eam-opt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
.eam-opt-fig { max-width: 680px; }
.eam-opt-svg { display: block; width: 100%; height: auto; max-height: 420px; }
.eam-opt-cell { stroke: var(--sft-border); stroke-width: .5; fill: transparent; }
.eam-opt-cell-empty { fill: transparent; stroke-dasharray: 2 2; }
.eam-opt-mk { fill: none; stroke: var(--sft-text); stroke-width: 2; }
.eam-opt-mk-cur { stroke-dasharray: 3 2; }
.eam-opt-mk-best { stroke-width: 2.5; }
.eam-opt-params .eam-c-sel { width: 44px; }
/* スマホ: 最適化の表は行を縦積みにして、入力欄も列も全部画面内に収める */
@media (max-width: 640px) {
  .eam-opt-panel .eam-tablewrap { overflow-x: visible; border: 0; background: transparent; }
  .eam-opt-panel .eam-table { min-width: 0; width: 100%; }
  .eam-opt-panel .eam-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .eam-opt-panel .eam-table, .eam-opt-panel .eam-table tbody, .eam-opt-panel .eam-table tr { display: block; }
  .eam-opt-panel .eam-table tr { margin: 0 0 10px; border: 1px solid var(--sft-border); border-radius: var(--sft-radius-md); background: var(--sft-bg-card); }
  .eam-opt-panel .eam-table th, .eam-opt-panel .eam-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px; white-space: normal; border: 0; }
  .eam-opt-panel .eam-table td[data-label]::before { content: attr(data-label); color: var(--sft-text-secondary); font-size: 12px; text-align: start; }
  .eam-opt-panel .eam-table .eam-opt-rowhead { font-weight: 600; justify-content: flex-start; }
  .eam-opt-panel .eam-table th.eam-c-sel, .eam-opt-panel .eam-table td.eam-c-sel { width: auto; text-align: start; padding-left: 10px; }
  .eam-opt-params td.eam-c-sel { float: none; }
}

/* ビュー (列の選び方) の操作列と列の選択画面 */
.eam-viewbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 8px; }
.eam-viewbar .eab-btn { min-height: 34px; }
.eam-colpanel { margin: 0 0 10px; padding: 12px; border: 1px solid var(--sft-border); border-radius: 8px; background: var(--sft-bg-alt); }
.eam-colhint { margin: 0 0 8px; }
.eam-collist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; }
.eam-colitem { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; font-size: 13px; }
.eam-colitem label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.eam-colitem input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sft-primary); }
.eam-nosort { color: var(--sft-text-muted); font-size: 11px; }
.eam-colmove { display: inline-flex; gap: 2px; }
.eam-colmove .eab-btn { min-width: 34px; min-height: 34px; padding: 0 8px; }
.eam-colsave { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.eam-colsave .eam-ff { max-width: 220px; }
.eam-colsave .eab-btn { min-height: 34px; }
.eam-row:hover { background: var(--sft-bg-hover); }
.eam-row-new { background: var(--sft-primary-bg); }
.eam-new { display: inline-block; padding: 0 6px; font-size: 10px; font-weight: 700; border-radius: 999px; background: var(--sft-primary); color: var(--sft-on-primary); vertical-align: middle; }
.eam-msg { text-align: center !important; padding: 28px 12px !important; color: var(--sft-text-secondary); white-space: normal !important; }

.eam-pager { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 0; }
.eam-pager .eab-btn { min-height: 36px; }

.eam-detail { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--sft-border); border-radius: var(--sft-radius-md); background: var(--sft-bg-card); }
.eam-detail-title { margin: 0 0 10px; font-size: 15px; }

/* 狭い画面 (390px): 帯の項目は 2 列・操作は全幅、表は横スクロールの枠の中、日時は隠す */
@media (max-width: 560px) {
    .eam-header { padding: 6px 12px; gap: 8px; flex-wrap: wrap; }
    .eam-main { padding: 14px 12px 40px; }
    .eam-band { padding: 12px; }
    .eam-f { flex: 1 1 calc(50% - 6px); max-width: none; }
    .eam-band-actions { width: 100%; margin-left: 0; }
    .eam-band-actions .eab-btn { flex: 1 1 auto; min-height: 44px; }
    .eam-ff { flex: 1 1 calc(50% - 6px); max-width: none; }
    .eam-selbar .eab-btn, .eam-pager .eab-btn { min-height: 44px; }
    .eam-table th, .eam-table td { padding: 8px 8px; }
    .eam-viewbar .eab-btn, .eam-colsave .eab-btn { min-height: 44px; }
    .eam-colmove .eab-btn { min-width: 44px; min-height: 44px; }
    .eam-colitem { min-height: 44px; }
}