/* ==========================================================================
   Faragoman — Knowledge-base inline glossary (دانشنامه)
   Inline term trigger + desktop popover + mobile bottom-sheet.
   Loaded only on article pages (partials/article-enhance.php).
   ========================================================================== */

:root {
  --wiki-accent: #a855f7;
  --wiki-accent-soft: rgba(168, 85, 247, .16);
  --wiki-accent-line: rgba(168, 85, 247, .45);
  --wiki-gold: #fbbf24;
  --wiki-pop-bg: #170e28;
  --wiki-pop-bg2: #1f1436;
  --wiki-pop-border: rgba(168, 85, 247, .35);
  --wiki-pop-text: #ece7fb;
  --wiki-pop-muted: #b7abd6;
}

/* --- Inline trigger ------------------------------------------------------ */
.wiki-term {
  /* Wiki terms render as purple (بنفش) links inside articles, per design.
     These anchors carry NO href in the popup case, so this colour is the ONLY
     thing that makes them look like links — keep it distinct from body text. */
  color: var(--wiki-accent);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  border-bottom: 1px dotted var(--wiki-accent-line);
  border-radius: 2px;
  padding: 0 .1em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.wiki-term:hover,
.wiki-term:focus-visible {
  background: var(--wiki-accent-soft);
  border-bottom-color: var(--wiki-accent);
  color: #c084fc;
  outline: none;
}
.wiki-term:focus-visible {
  outline: 2px solid var(--wiki-accent-line);
  outline-offset: 2px;
}
.wiki-term--page::after {
  content: "↗";
  font-size: .72em;
  margin-inline-start: .12em;
  opacity: .7;
  vertical-align: super;
}

/* --- Desktop popover ----------------------------------------------------- */
.wiki-pop {
  position: absolute;
  z-index: 1200;
  width: min(320px, calc(100vw - 32px));
  padding: 0;
  background: linear-gradient(160deg, var(--wiki-pop-bg2), var(--wiki-pop-bg));
  color: var(--wiki-pop-text);
  border: 1px solid var(--wiki-pop-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(10, 4, 24, .6), 0 0 0 1px rgba(168, 85, 247, .08),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.wiki-pop.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wiki-pop__inner { padding: 14px 16px 15px; }
.wiki-pop__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wiki-pop__badge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--wiki-accent-soft);
  color: var(--wiki-gold);
  font-size: .95rem;
}
.wiki-pop__term {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.wiki-pop__brief {
  margin: 0;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--wiki-pop-muted);
}
.wiki-pop__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--wiki-gold);
  background: var(--wiki-accent-soft);
  border: 1px solid var(--wiki-accent-line);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .16s ease;
}
.wiki-pop__more:hover { background: rgba(168, 85, 247, .28); }
/* little arrow */
.wiki-pop__arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--wiki-pop-bg2);
  border-left: 1px solid var(--wiki-pop-border);
  border-top: 1px solid var(--wiki-pop-border);
  transform: rotate(45deg);
}
.wiki-pop[data-placement="top"] .wiki-pop__arrow {
  bottom: -7px;
  border-left: 0; border-top: 0;
  border-right: 1px solid var(--wiki-pop-border);
  border-bottom: 1px solid var(--wiki-pop-border);
}

/* --- Mobile bottom-sheet ------------------------------------------------- */
.wiki-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(5, 3, 12, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.wiki-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.wiki-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1301;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(160deg, var(--wiki-pop-bg2), var(--wiki-pop-bg));
  color: var(--wiki-pop-text);
  border-top: 1px solid var(--wiki-pop-border);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 60px rgba(5, 2, 15, .7);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.wiki-sheet.is-open { transform: translateY(0); }
.wiki-sheet__grip {
  width: 42px; height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.wiki-sheet__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.wiki-sheet__badge {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--wiki-accent-soft);
  color: var(--wiki-gold);
  font-size: 1.15rem;
}
.wiki-sheet__term { font-size: 1.15rem; font-weight: 700; color: #fff; }
.wiki-sheet__brief {
  margin: 0;
  font-size: .96rem;
  line-height: 2;
  color: var(--wiki-pop-muted);
}
.wiki-sheet__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  padding: 11px 18px;
  width: 100%;
  justify-content: center;
  font-size: .95rem; font-weight: 700;
  color: #17091f;
  background: linear-gradient(180deg, var(--wiki-gold), #f59e0b);
  border: 0; border-radius: 14px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .wiki-pop, .wiki-sheet, .wiki-sheet-backdrop { transition: none; }
}