/* ==========================================================================
   Entity peek (.epk-*) — the hover "remind me" card (js/entity-peek.js)
   --------------------------------------------------------------------------
   One washi card for bare KANJI glyphs (kanji-only, owner ruling 2026-07-03
   — word names already carry reading + gloss on every surface). Same paper
   conventions as the play popover (ink-wash-tabs.css): warm card surface,
   faint noise, quiet shadow ring. pointer-events:none — the card is a
   whisper, never a surface. Sits under the 9999 play popover (they never
   coexist) and above the 9300 word panel.
   ========================================================================== */

.entity-peek {
  position: fixed;
  z-index: 9998;
  display: none;
  pointer-events: none;
  max-width: 300px;
  padding: 9px 13px 10px;
  background: var(--card-surface, #FAFAF7);
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(44, 44, 44, 0.09), 0 0 0 1px rgba(44, 44, 44, 0.05);
  opacity: 0;
  transform: translateY(4px);              /* above the anchor: settles upward */
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.entity-peek.epk-below { transform: translateY(-4px); }   /* flipped below: settles downward */
.entity-peek.epk-in { opacity: 1; transform: none; }

/* ── glyph beside keyword + the kun/on line ─────────────────────────────── */
.epk-k { display: flex; align-items: flex-start; gap: 12px; }
.epk-glyph {
  font: 400 34px/1.15 'Klee One', 'Noto Sans JP', sans-serif;
  color: var(--text-primary, #2C2C2C);
  flex: 0 0 auto;
}
.epk-kbody { min-width: 0; padding-top: 2px; }
.epk-kw {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary, #2C2C2C);
}
/* ── the shared peek READINGS ROW (.kpk-*) — KanjiPage.readingsRowHTML ────
   One renderer for BOTH hover cards (this one and the walk's .kw-kxpeek),
   styled once here (always-loaded). One line per reading family; the tiny
   lowercase label carries the kun/on colour (kun = accent indigo, on = the
   kanji surfaces' terracotta token); kana rests in ink; romaji keeps the
   app-wide amber italic "how it sounds" voice. The in-word CTX lead sits
   first and larger, colour on its kana — hierarchy says "this one, here",
   never a caption (owner 2026-07-16). ── */
.kpk { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; min-width: 0; }
.kpk-line, .kpk-ctx { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.kpk-lbl {
  font: 600 9.5px/1 var(--font-ui, Inter, sans-serif);
  letter-spacing: 0.04em;
  width: 24px;
  flex: 0 0 auto;
}
.kpk-lbl--kun { color: var(--color-accent); }
.kpk-lbl--on  { color: var(--color-kanji-on, #9E5E43); }
.kpk-rs { min-width: 0; }
.kpk [lang="ja"] { font: 400 13px/1.35 'Klee One', 'Noto Sans JP', sans-serif; color: var(--text-primary, #2C2C2C); }
.kpk-r { white-space: nowrap; }
.kpk-ro { font: italic 400 10px var(--font-ui, Inter, sans-serif); color: var(--color-amber-deep, #8A6E35); margin-left: 3px; }
.kpk-dot { font: 400 10px var(--font-ui, Inter, sans-serif); color: var(--color-faint-warm, #6E6860); opacity: 0.55; margin: 0 4px; }
/* the in-word lead: larger, its kana wears the family colour */
.kpk-ctx [lang="ja"] { font-size: 16px; }
.kpk-ctx--kun [lang="ja"] { color: var(--color-accent); }
.kpk-ctx--on  [lang="ja"] { color: var(--color-kanji-on, #9E5E43); }
/* the demoted tail — every other reading, one quiet line */
.kpk-also { font: 400 10.5px/1.5 var(--font-ui, Inter, sans-serif); color: var(--color-faint-warm, #6E6860); white-space: nowrap; }
.kpk-also [lang="ja"] { font-size: 12px; color: var(--color-stone, #57534e); }

@media (prefers-reduced-motion: reduce) {
  .entity-peek { transition: none; }
}