/* Glossary pop-ups for static pages (ForeGlass). Mirrors the .gloss rules in
   frontends/comuvia/src/app/globals.css so both sites look the same; comuvia.ai
   itself keeps its rules in globals.css. Tokens fall back to the ForeGlass
   palette (developers/brand.css) when a page does not define them.
   Source of truth: frontends/comuvia/public/glossary/glossary.css; the copy in
   foreglass-proto/public/education/ is written by scripts/sync-public-glossary.py. */
.gloss {
  text-decoration: underline dotted var(--color-accent, #0f766e);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}
.gloss[data-pinned="true"] { text-decoration-style: solid; }
.gloss__pop {
  z-index: 60;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  max-width: calc(100vw - 16px);
  background: var(--color-surface, #fff);
  color: var(--color-fg, #111);
  border: 1px solid var(--color-border, #e5e5e5);
  border-left: 3px solid var(--color-accent, #0f766e);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(15, 40, 60, 0.14);
  font-size: 0.9rem; font-style: normal; font-weight: 400;
  line-height: 1.45; text-align: left; white-space: normal;
}
.gloss__pop-term { font-weight: 700; color: var(--color-accent, #0f766e); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.gloss__pop-def { color: inherit; }
.gloss__pop-ref { font-size: 0.8rem; color: var(--color-accent, #0f766e); text-decoration: underline; }
.gloss__pop-hint { font-size: 0.7rem; color: var(--color-muted, #6b7280); }
@media (prefers-reduced-motion: no-preference) {
  .gloss__pop { animation: gloss-fade 0.12s ease-out; }
  @keyframes gloss-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
}