/* ============================================================
   Tooltip — 補足ラベル
   アイコンや控えめな操作の説明を一行だけ。hover と focus の両方で出る
   （キーボードでも読める）。煽らず、すぐ消える。JS不要（CSSのみ）。
   トリガに aria-describedby、tip に role="tooltip" を与える。
   ============================================================ */

.has-tip { position: relative; display: inline-flex; }
.has-tip > .tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(3px); z-index: 70;
  white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--paper);
  font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: 7px;
  box-shadow: var(--shadow-pop); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.has-tip > .tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.has-tip:hover > .tip,
.has-tip:focus-within > .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 下向き（上に余白がないとき） */
.has-tip.below > .tip { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-3px); }
.has-tip.below > .tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
.has-tip.below:hover > .tip,
.has-tip.below:focus-within > .tip { transform: translateX(-50%) translateY(0); }