/* 指標の「？」ボタンと定義のポップアップ（ui/metric-help.js。要件定義 D §4）。ポップアップの枠・背景は ui/style.css の .dialog。色は style.css の変数（light / dark） */
/* 「？」: 見た目は名前の右の小さな 1 文字、押せる大きさは 44px 四方（はみ出した分は負の余白で行の高さを変えない） */
.metric-help {
  display: inline-grid; place-items: center; box-sizing: border-box;
  min-width: 44px; min-height: 44px; margin: -12px -12px -12px -6px; padding: 0;
  border: 0; background: transparent; color: var(--text-2);
  font-size: 0.75rem; font-weight: 700; line-height: 1; vertical-align: middle; cursor: pointer;
}
.metric-help { position: relative; }
/* 「？」の丸の枠（地の文と分ける。どの画面でも同じ） */
.metric-help::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 1.7em; height: 1.7em;
  box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; pointer-events: none;
}
.metric-help:hover { color: var(--accent); }
/* 地の文の中の説明のリンク（下線つきの言葉。押すと「？」と同じポップアップ） */
.metric-help.metric-help-link {
  display: inline; min-width: 0; min-height: 0; font-weight: inherit; vertical-align: baseline; margin: 0; padding: 0; border: 0; background: transparent; color: var(--accent);
  font: inherit; line-height: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.metric-help.metric-help-link::before { content: none; }
.metric-help.metric-help-link:hover { color: var(--accent); }
.metric-help.metric-help-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.metric-help:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; border-radius: 50%; }
/* ポップアップ: 390px 幅では左右 16px を残して幅いっぱい。開閉の動きは付けない */
.metric-help-dlg { width: min(440px, calc(100vw - 32px)); box-sizing: border-box; min-width: 0; }
.metric-help-title { margin: 0 0 8px; font-size: 1rem; overflow-wrap: anywhere; }
.metric-help-def { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.metric-help-unit { margin: 0 0 14px; font-size: 0.82rem; color: var(--text-2); overflow-wrap: anywhere; }
.metric-help-close { min-height: 44px; }