/* glossary.css — minimal styling for hover-tooltips. Loaded as
   extra_css so it applies on every Material-themed page without
   pulling in the rest of styles.css.

   Design intent: the underlined term should feel like a footnote
   marker, not a link. The popover should look like a dictionary
   entry, not an ad. */

.gd-term {
  border-bottom: 1px dotted currentColor;
  cursor: help;
  /* Subtle inheritance: don't change color, weight, or size. */
}
.gd-term:focus {
  outline: 2px solid var(--md-accent-fg-color, #6b4a8b);
  outline-offset: 2px;
  border-radius: 2px;
}
.gd-term:focus:not(:focus-visible) {
  outline: none;
}

.gd-term-popover {
  position: absolute;
  z-index: 9000;
  max-width: min(420px, calc(100vw - 24px));
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, #222);
  border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, .12));
  border-left: 3px solid var(--md-accent-fg-color, #6b4a8b);
  border-radius: 6px;
  box-shadow: 0 8px 28px -10px rgba(0, 0, 0, .25);
  padding: 12px 14px 10px;
  font-size: 14px;
  line-height: 1.45;
}
.gd-term-popover[hidden] {
  display: none;
}
.gd-term-popover-head {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
}
.gd-term-popover-def {
  color: var(--md-default-fg-color--light, rgba(0, 0, 0, .72));
  margin-bottom: 8px;
}
.gd-term-popover-link {
  font-size: 12px;
  letter-spacing: .02em;
}
.gd-term-popover-link a {
  color: var(--md-accent-fg-color, #6b4a8b);
  text-decoration: none;
}
.gd-term-popover-link a:hover {
  text-decoration: underline;
}

/* Mobile: pinned popovers should be easy to tap-dismiss. The script
   detaches "hover" semantics on touch (it pins on tap, and clicking
   outside hides), so we only need to make sure the popover itself
   has comfortable touch targets. */
@media (max-width: 600px) {
  .gd-term-popover {
    font-size: 15px;
    padding: 14px 16px 12px;
  }
  .gd-term-popover-link {
    font-size: 13px;
  }
}