/* ───────────────────────────────────────
   FILE: css/explain.css
   PURPOSE: "Data explains itself" layer. Shared floating callout shown on
            hover/focus (fine pointers) or tap (coarse pointers) for any
            element carrying data-explain. Used by the hero readouts and the
            module feature-card stats on index.html.
   PART OF: Sentinel website stylesheet
   DEPENDS ON: css/tokens.css, js/explain/explain.js
   LAST UPDATED: 2026-06-08
   ─────────────────────────────────────── */

[data-explain] { cursor: help; }

/* Feature-card stats get a quiet dotted underline so the affordance reads.
   (Hero SVG readouts have their own frame-highlight, so they are excluded.) */
.feat-data [data-explain] {
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 4px;
  outline: none;
}
.feat-data [data-explain]:hover,
.feat-data [data-explain]:focus-visible,
.feat-data [data-explain].explain-open {
  text-decoration-color: var(--accent);
}

/* Shared callout, positioned by js/explain/explain.js via CSSOM. */
.explain-tip {
  position: fixed;
  z-index: 300;
  max-width: 248px;
  background: rgba(20, 19, 17, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--accent);
  border-top-width: 2px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  padding: 9px 12px 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.explain-tip.show { opacity: 1; transform: none; }
.explain-tip .explain-origin {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--accent);
  margin-bottom: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .explain-tip { transition: none; transform: none; }
}