/* =============================================
   Japanese Reader Experience v2 — jp-reader.css
   ============================================= */

:root {
  --jr-cream        : #faf6f0;
  --jr-paper        : #f3ede3;
  --jr-border       : #ddd0bc;
  --jr-ink          : #2c2416;
  --jr-ink-soft     : #6b5c47;
  --jr-accent       : #b05c2a;
  --jr-accent-light : rgba(176,92,42,0.10);
  --jr-accent-mid   : rgba(176,92,42,0.22);
  --jr-shadow       : rgba(44,36,22,0.18);
  --jr-ruby-color   : #8a7060;
  --jr-radius       : 12px;
  --jr-font         : "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
}

/* ── Line height for furigana breathing room ── */
.entry-content p,
.post-content p,
article p {
  line-height  : 2.2 !important;
  padding-top  : 0.3em;
}

/* ── Plain furigana ── */
ruby.jr-ruby {
  display     : ruby;
  ruby-align  : center;
}
ruby.jr-ruby rt {
  font-size     : 0.5em;
  color         : var(--jr-ruby-color);
  letter-spacing: 0.04em;
  font-family   : var(--jr-font);
  line-height   : 1.2;
}

/* ── Glossary word ── */
.jr-word {
  display          : inline;
  cursor           : pointer;
  border-bottom    : 1.5px dotted var(--jr-accent);
  padding-bottom   : 1px;
  border-radius    : 3px;
  transition       : background 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action     : manipulation;
  user-select      : none;
  -webkit-user-select: none;
}
.jr-word:hover,
.jr-word:focus,
.jr-word.jr-active {
  background : var(--jr-accent-light);
  outline    : none;
}

/* =============================================
   FLOATING CARD
   Position is set entirely by JS after render.
   ============================================= */
.jr-card {
  /* Fixed so it never scrolls with page */
  position      : fixed;
  z-index       : 999999;

  width         : 280px;
  max-width     : calc(100vw - 24px);

  background    : var(--jr-cream);
  border        : 1px solid var(--jr-border);
  border-top    : 3px solid var(--jr-accent);
  border-radius : var(--jr-radius);
  box-shadow    : 0 6px 28px var(--jr-shadow);

  padding       : 14px 16px 14px;
  font-family   : var(--jr-font);
  font-size     : 14px;
  color         : var(--jr-ink);
  line-height   : 1.65;

  /* Hidden by default */
  visibility    : hidden;
  opacity       : 0;
  transform     : translateY(4px);
  transition    : opacity 0.15s ease, transform 0.15s ease;
  /* pointer-events off when hidden so it never blocks taps */
  pointer-events: none;
}

.jr-card.jr-card--visible {
  visibility    : visible;
  opacity       : 1;
  transform     : translateY(0);
  pointer-events: auto;
}

/* ── Card header ── */
.jr-card__header {
  display        : flex;
  align-items    : baseline;
  gap            : 8px;
  margin-bottom  : 10px;
  padding-bottom : 10px;
  border-bottom  : 1px solid var(--jr-border);
}
.jr-card__word {
  font-size      : 1.6em;
  font-weight    : 700;
  color          : var(--jr-ink);
  letter-spacing : 0.03em;
  line-height    : 1;
}
.jr-card__reading {
  font-size      : 0.88em;
  color          : var(--jr-ink-soft);
}

/* ── Meaning ── */
.jr-card__meaning {
  font-size      : 0.9em;
  color          : var(--jr-ink);
  line-height    : 1.6;
}

/* ── Close button ── */
.jr-card__close {
  position       : absolute;
  top            : 10px;
  right          : 10px;
  width          : 24px;
  height         : 24px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : var(--jr-paper);
  border         : 1px solid var(--jr-border);
  border-radius  : 50%;
  color          : var(--jr-ink-soft);
  font-size      : 11px;
  cursor         : pointer;
  padding        : 0;
  line-height    : 1;
  transition     : background 0.12s;
  flex-shrink    : 0;
}
.jr-card__close:active {
  background     : var(--jr-border);
}