/* ─── Inline term tooltips ──────────────────────────────────
   Pattern:
   <span class="t-term" data-def="Search Engine Optimization — the work of making your site show up when someone searches Google." data-link="plain-english.html#search">SEO</span>

   Falls back gracefully without JS (terms render as text with a dotted underline; on hover a CSS-only popover shows the definition).
*/
.t-term {
  position: relative;
  border-bottom: 1px dashed var(--accent-500, #9B2335);
  cursor: help;
  color: inherit;
  font: inherit;
}
.t-term::before {
  content: attr(data-def);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--stone-950, #0c1829);
  color: var(--white, #fefaf9);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 400;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  width: max-content;
  max-width: 320px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
  white-space: normal;
  border-bottom: none;
  cursor: default;
}
.t-term::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--stone-950, #0c1829);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  z-index: 200;
}
.t-term:hover::before,
.t-term:focus::before,
.t-term.is-open::before,
.t-term:hover::after,
.t-term:focus::after,
.t-term.is-open::after {
  opacity: 1;
  visibility: visible;
}
.t-term:hover::before,
.t-term:focus::before,
.t-term.is-open::before {
  transform: translateX(-50%) translateY(-2px);
}

/* Mobile: open via tap (JS adds .is-open class) */
@media (hover: none) {
  .t-term::before { max-width: 260px; font-size: 0.82rem; }
}

/* Position fix near right edge of container */
.t-term.t-right::before,
.t-term.t-right::after { left: auto; right: 0; transform: none; }
.t-term.t-right:hover::before,
.t-term.t-right.is-open::before { transform: translateY(-2px); }
.t-term.t-right::after { right: 6px; }

/* Optional: "Learn more" link inside tooltip — not used in MVP, hook for future */