/*
 * 説明ツールチップ（3アプリ共通）
 *
 * 遼様のご要望「できるだけ教育コストをかけたくないので、説明ツールチップを設けたい」に対応するもの。
 * 画面に説明文をベタ書きすると、慣れた人にとっては毎回目に入る雑音になる。
 * 「？」を押したときだけ出る形にすれば、初めての人には手引きになり、慣れた人の邪魔はしない。
 *
 * 色はアプリ側の CSS 変数（--accent 等）を使う。変数が無い環境でも読めるよう、
 * var() の第2引数に控えめな既定色を必ず添えてある。
 */

/* 2026-08-29 遼様のご指摘「全体的に文字が小さい」に合わせて、
   「？」ボタン（14px→17px、押せる範囲も20→24px）と吹き出し本文
   （12.5px→14.5px。13px未満を残さない）を一緒に引き上げた */
.tipx {
  border: none; background: none; padding: 0; margin: 0 0 0 6px;
  width: 24px; height: 24px; line-height: 1; cursor: pointer; vertical-align: middle;
  color: var(--text-faint, #94a3b8);
  font-size: 17px;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.tipx:hover, .tipx[aria-expanded="true"] {
  color: var(--accent, #2563eb);
  background: var(--accent-soft, rgba(37, 99, 235, .1));
}
/* キーボード操作の人が今どこにいるか分かるようにする */
.tipx:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

/* 吹き出し本体。ページ内のどこに置かれたボタンからでも使えるよう body 直下に1つだけ作り、
   位置だけ付け替えて使い回す（ボタンの数だけ DOM を作らない） */
.tipx-pop {
  position: fixed; z-index: 9999;
  max-width: 340px; padding: 12px 14px;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
  font-size: 14.5px; line-height: 1.65; font-weight: 500;
  white-space: pre-wrap;      /* 説明文に改行を入れたいことがあるため */
  opacity: 0; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;       /* 閉じている間はクリックを通す */
}
.tipx-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .tipx-pop { transition: none; transform: none; }
}