/* colophon glossary styling — engine-provided, so every theme gets a working, good-looking
   glossary popover for free. It adapts to the active theme through that theme's CSS custom
   properties (with neutral fallbacks for token-less themes). A theme may override .gloss or
   .gloss-tip in its own stylesheet for a bespoke look. */

/* The in-text term: a light, semi-transparent wavy underline in the theme accent. Styled by
   the .gloss class (not the element) so an auto-matched <abbr> and an author-forced <dfn> look
   the same — and the <dfn>'s default italic is reset. */
.gloss {
  font-style: normal;
  text-decoration: underline wavy;
  text-decoration-color: color-mix(in srgb, var(--accent, currentColor) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}
.gloss:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The popover reads like a dictionary stanza: a (serif) headword over a muted definition. */
.gloss-tip {
  background: var(--elevated, var(--surface, #1c1c24));
  color: var(--text, #ededf1);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 12px;
  padding: 0.7rem 0.85rem 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}
.gloss-tip .gloss-term {
  display: block;
  font-family: var(--serif, inherit);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text, inherit);
  padding-bottom: 0.35rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.3));
}
.gloss-tip .gloss-def {
  display: block;
  font-family: var(--sans, inherit);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted, inherit);
}
.gloss-tip[hidden] { display: none; }

/* Citation-style reference markers baked just after a term (a "↗" glyph for one link, numbers
   for several). Real anchors, so they work even when the popover doesn't — the theme may restyle
   .gloss-ref freely. */
.gloss-refs {
  font-size: 0.7em;
  line-height: 0;
  white-space: nowrap;
}
.gloss-ref {
  text-decoration: none;
  color: var(--accent, currentColor);
  padding: 0 0.1em;
  font-variant-numeric: tabular-nums;
}
.gloss-ref + .gloss-ref { margin-left: 0.05em; }
.gloss-ref:hover { text-decoration: underline; }
.gloss-ref:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The card's legend names each reference so the bare markers above make sense. Plain text — the
   clickable anchors live in the article, not the popover. */
.gloss-tip .gloss-legend {
  display: block;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  font-family: var(--sans, inherit);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted, inherit);
}
.gloss-tip .gloss-legend-item { display: flex; gap: 0.4rem; }
.gloss-tip .gloss-legend-mark {
  flex: none;
  min-width: 1em;
  text-align: right;
  color: var(--accent, currentColor);
  font-variant-numeric: tabular-nums;
}