/* ============================================================
   product-skill · glossary layer
   Acronym trigger (.ps-gloss) + one shared anchored popover.
   Leans entirely on site.css tokens. No overrides of shared
   .ps-* rules; light + on-dark variants both meet AA contrast.
   ============================================================ */

/* ---- 1. The inline trigger (button reset → looks like text) ---- */
.ps-gloss {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: help;
  text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-text-decoration: underline dotted var(--accent);
}
.ps-gloss:hover { text-decoration-color: var(--accent-deep); }
/* on a dark band the dotted cue lifts to the on-dark accent */
.ps-band--dark .ps-gloss {
  text-decoration-color: var(--accent-on-dark);
  -webkit-text-decoration-color: var(--accent-on-dark);
}
.ps-band--dark .ps-gloss:hover { text-decoration-color: var(--on-dark); }

/* ---- 2. Shared popover (fixed, JS-positioned) ---- */
.ps-gloss-pop {
  position: fixed;
  top: 0; left: 0;
  z-index: 95;
  max-width: min(300px, calc(100vw - 16px));
  background: var(--cream-card);
  color: var(--ink-800);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(20, 16, 10, .22);
  padding: 14px 16px;
  font-family: var(--sans);
  animation: ps-gloss-in .16s ease;
}
.ps-gloss-pop[hidden] { display: none; }

.ps-gloss-pop__full {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 0 0 5px;
}
.ps-gloss-pop__gloss {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-600);
  margin: 0 0 10px;
}
.ps-gloss-pop__link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--accent-deep);
  text-decoration: none;
}
.ps-gloss-pop__link:hover { text-decoration: underline; }

/* ---- 3. On-dark variant (trigger sits inside a .ps-band--dark) ---- */
.ps-gloss-pop--on-dark {
  background: #1c1913;
  border-color: var(--hair-dark);
  color: var(--on-dark);
}
.ps-gloss-pop--on-dark .ps-gloss-pop__full { color: var(--on-dark); }
.ps-gloss-pop--on-dark .ps-gloss-pop__gloss { color: var(--on-dark-70); }
.ps-gloss-pop--on-dark .ps-gloss-pop__link { color: var(--accent-on-dark); }

@keyframes ps-gloss-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-gloss-pop { animation: none; }
}