/* ============================================================
 *  tooltip.css — P3.3 glossary "i" tooltip component.
 *  Brand: Cambria, 4px radius, soft shadow, gold accent, 200ms ease.
 * ============================================================ */

/* inline ⓘ icon appended next to a label */
.gloss-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; padding: 0;
  font-family: inherit; font-size: 11px; line-height: 1;
  color: var(--gold-deep, #6B3F1A);
  background: transparent; border: none; border-radius: 50%;
  cursor: help; vertical-align: middle; opacity: .62;
  transition: opacity .2s ease, color .2s ease, transform .2s ease;
  -webkit-appearance: none; appearance: none;
}
.gloss-i:hover, .gloss-i:focus-visible { opacity: 1; color: var(--gold, #BD9568); outline: none; }
.gloss-i:focus-visible { box-shadow: 0 0 0 2px rgba(189, 149, 104, .45); }
/* don't let the icon inherit a huge header font-size */
h1 .gloss-i, h2 .gloss-i, h3 .gloss-i, .h-sub .gloss-i { font-size: 11px; }

/* popover */
.gloss-pop {
  position: absolute; z-index: 9999; max-width: 320px;
  background: #fff; color: var(--ink, #1a1a1a);
  border: 1px solid var(--rule, #D9D9D9); border-top: 3px solid var(--gold, #BD9568);
  border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
  padding: 12px 14px; font-family: 'Cambria', Georgia, 'Times New Roman', serif;
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.gloss-pop.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gloss-pop[hidden] { display: none; }

.gloss-term {
  font-size: 13.5px; font-weight: 700; color: #000;
  margin-bottom: 6px;
}
.gloss-def { font-size: 12.5px; line-height: 1.5; color: var(--text-mid, #444); }
.gloss-calc {
  font-size: 12px; line-height: 1.5; color: var(--ink, #1a1a1a);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule, #D9D9D9);
}
.gloss-calc-h {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold-deep, #6B3F1A); margin-bottom: 3px;
}
.gloss-basis {
  font-size: 11px; line-height: 1.45; color: #666;
  margin-top: 7px; font-style: italic;
}
/* C — explanation/assumptions (italic) below the methodology */
.gloss-explain {
  font-size: 11.5px; line-height: 1.5; color: #555;
  margin-top: 7px;
}
.gloss-explain em { font-style: italic; }
/* C — data-sourced items: "Source — (<name>)" */
.gloss-source {
  font-size: 12px; line-height: 1.5; color: var(--ink, #1a1a1a);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule, #D9D9D9);
}
/* Batch-7 3.2 — the formula's terms, defined in small text */
.gloss-terms {
  font-size: 10.5px; line-height: 1.5; color: #666; margin-top: 6px;
}
.gloss-terms span { display: block; }
.gloss-terms b { color: var(--gold-deep, #6B3F1A); font-weight: 700; }
/* Batch-7 3.2 — "Read more" → Knowledge Center */
.gloss-readmore {
  font-size: 11.5px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--rule, #D9D9D9);
}
.gloss-readmore a { color: var(--gold, #BD9568); text-decoration: none; font-weight: 700; }
.gloss-readmore a:hover { text-decoration: underline; }