/* term.css — 术语旁边的小问号角标和提示卡（v0.26 第 5 段，2026-10-29；交互在 term.js）。
   10-29 Leon「在这类概念边上加一个小问号角标？hover提示」。页面里把术语写成 <span class="term" data-term="fde">FDE</span>，
   term.js 在它后面补一颗 .term-q（圆圈里一个「?」），提示卡 .term-tip 挂在 body 下面（不会被卡片的 overflow: hidden 裁掉），位置由 term.js 算。
   用到的页面：页头写 css: /term.css?v=N、js: /term.js?v=N，正文里写一次 {{> terms}}（解释文字在 src/data/terms.json）。
   只用 ui.css 的变量，昼夜跟着换；不用 mix-blend-mode。 */
.term { white-space: nowrap; }   /* 术语和问号不分开折行 */
.term-q {
  position: relative; display: inline-grid; place-items: center; box-sizing: border-box;
  width: 1.35em; height: 1.35em; margin: 0 0 0 .18em; padding: 0;
  border: 1px solid currentColor; border-radius: 50%; background: none;
  color: var(--muted); font: 600 .6em/1 var(--sans); vertical-align: .9em;
  cursor: help; transition: color .15s ease, background-color .15s ease;
}
.term-q::after { content: "?"; }
.term-q::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }   /* 手指点得到：点按范围比圆圈大一圈 */
.term-q:hover, .term-q.is-on { color: var(--ink); }
.term-q:focus-visible { outline-offset: 2px; }   /* 全站焦点圈（ui.css）离 3px，圈太小时压到旁边的字 */

.term-tip {
  position: fixed; z-index: 120; top: 0; left: 0; box-sizing: border-box;
  width: max-content; max-width: min(260px, calc(100vw - 16px)); padding: 10px 13px;
  border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--sheet); box-shadow: var(--shadow-card-hover);
  color: var(--ink-2); font: 400 13px/1.65 var(--sans); letter-spacing: 0; text-align: left; white-space: normal; text-wrap: pretty;
  opacity: 0; translate: 0 3px; transition: opacity .14s ease, translate .14s ease; pointer-events: auto;
}
.term-tip[data-side="top"] { translate: 0 -3px; }
.term-tip.is-on { opacity: 1; translate: 0 0; }
.term-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .term-q, .term-tip { transition: none; }
}
@media print { .term-q, .term-tip { display: none; } }