/* ============================================================
   用語ツールチップ（パイロット: 指標用語グロッサリー）
   ------------------------------------------------------------
   .layout 配下(記事本文・表ヘッダー)の用語初出/th に注入される
   .gloss-trigger ボタンと、共有ポップオーバー #gloss-popover の
   スタイル。色は tokens.css の .layout カスタムプロパティを
   そのまま参照するため、ライト/ダーク切替は自動で追従する。

   ポップオーバーは #gloss-popover 単体を .layout の最後の子要素
   として1つだけ生成し(assets/js/glossary-tooltip.js)、
   position: fixed で毎回トリガー位置から再計算するため、
   .table-scroll の overflow-x: auto によるクリップの影響を受けず、
   出現・消失は本文レイアウトに一切影響しない。
   ============================================================ */

/* <span>で実装する（<button>はUAスタイルの都合でdisplayが
   all:unsetでも完全にinline化しきれないブラウザがあり、見出しや
   本文の途中に挟むと周囲の行送りが崩れることがあるため採用しない）。
   キーボード操作は role="button" + tabindex="0" + JS側のEnter/Space
   ハンドリング（assets/js/glossary-tooltip.js）で担保する。 */
.layout .gloss-trigger {
  display: inline;
  cursor: help;
  color: inherit;
  font: inherit;
  border-bottom: 1px dotted var(--line-strong);
  padding-bottom: .5px;
}

.layout .gloss-trigger:hover,
.layout .gloss-trigger:focus-visible,
.layout .gloss-trigger[aria-expanded="true"] {
  border-bottom-style: solid;
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.layout .gloss-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* th 内はセル全体を疑似リンク化しない。文字だけ下線対象にする */
.layout th .gloss-trigger {
  border-bottom-width: 1px;
}

#gloss-popover {
  position: fixed;
  z-index: 400;
  max-width: min(280px, calc(100vw - 24px));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  text-align: left;
  will-change: transform, opacity;
}

#gloss-popover.is-open {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  #gloss-popover {
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
  }
}

#gloss-popover[data-placement="bottom"] {
  transform: translateY(-4px);
}

#gloss-popover.is-open[data-placement="bottom"],
#gloss-popover.is-open[data-placement="top"] {
  transform: translateY(0);
}