/* ===== AI-term glossary: subtle highlight + hover/focus/tap tooltip =====
   Loaded on pages that use <span class="gloss" data-gloss="key">…</span>.
   Styling only — definitions + behavior live in glossary.js. */
.gloss {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(247, 185, 72, .38);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: help;
  transition: color .15s, text-decoration-color .15s;
}
.gloss:hover { color: var(--accent); text-decoration-color: var(--accent); }
.gloss:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; }

.gloss-pop {
  position: absolute;
  z-index: 200;
  max-width: 330px;
  width: max-content;
  background: #0E1014;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 16px 15px;
  box-shadow: 0 26px 55px -22px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.gloss-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.gloss-pop .gp-term { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 7px; letter-spacing: -.01em; }
.gloss-pop .gp-tech { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.58; }
.gloss-pop .gp-plain { margin: 11px 0 0; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 13px; line-height: 1.55; }
.gloss-pop .gp-plain b { display: block; font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.gloss-pop::after {
  content: ""; position: absolute; left: var(--arrow-left, 50%); width: 11px; height: 11px;
  background: #0E1014; border: 1px solid var(--line-2); transform: rotate(45deg);
}
.gloss-pop[data-place="top"]::after { bottom: -6px; border-top: 0; border-left: 0; }
.gloss-pop[data-place="bottom"]::after { top: -6px; border-bottom: 0; border-right: 0; }
@media (max-width: 400px) { .gloss-pop { max-width: calc(100vw - 24px); } }