/* Interlinear reader — ported from the proven old reader.html.
   The slide layout / fonts / sizing rules are preserved exactly;
   only the surrounding chrome is restyled to the design system. */

/* Symbols technique: each symbols font carries FULL coverage — normal glyphs
   for its content script plus grammar-symbol glyphs REDRAWN at the marker
   codepoints (00.ttf: ASCII markers inside Cyrillic words; 01.ttf:
   Latin-Ext-B markers inside Latin words). The per-content displayconfig
   picks which font the symbols row uses. NO unicode-range — restricting
   coverage makes the browser substitute other fonts mid-word and eats
   regular letters. */
/* WOFF2 (brotli-compressed, ~30% the size of TTF) with a TTF fallback for any
   browser that can't take WOFF2. The glyph tables are byte-for-byte the same
   (lossless conversion), so the symbols-overlay technique is unchanged. */
@font-face { font-family: 'reader-regular'; src: url('/assets/fonts/Roboto-Regular.woff2') format('woff2'), url('/assets/fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'latinized_cyrillic'; src: url('/assets/fonts/50.woff2') format('woff2'), url('/assets/fonts/50.ttf') format('truetype'); }
@font-face { font-family: 'cyrillic_symbols'; src: url('/assets/fonts/00.woff2') format('woff2'), url('/assets/fonts/00.ttf') format('truetype'); }
@font-face { font-family: 'latin_symbols'; src: url('/assets/fonts/01.woff2') format('woff2'), url('/assets/fonts/01.ttf') format('truetype'); }
@font-face { font-family: 'no_fallback'; src: url('/assets/fonts/empty.woff2') format('woff2'), url('/assets/fonts/empty.ttf') format('truetype'); }

.reader-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: #f4f4f4;
  user-select: none;
  overflow: hidden;
  touch-action: manipulation;
  display: flex; flex-direction: column;
  animation: slide-up var(--dur-med) var(--ease-spring);
}
@media (prefers-color-scheme: dark) {
  .reader-overlay { background: #f4f4f4; } /* reader stays light: ink on paper */
}

.reader-overlay .reader-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: var(--reader-bg-opacity, 0.9);
  transition: opacity .4s ease;
}
.reader-overlay.edit-mode .reader-bg { display: none; }

/* Calm hold shown instantly while a fullscreen reader's artifacts load. */
.reader-overlay.reader-hold { z-index: 1001; }

/* Embedded mode: the SAME reader hosted inside a feed card instead of a
   fullscreen overlay. No slide-up animation, no back button, and vertical
   pans must pass through to the feed's snap scroller. */
.reader-overlay.embedded {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: none;
}
.reader-overlay.embedded .reader-back { display: none; }
.reader-overlay.embedded .edge-blocker { display: none; }
.reader-overlay.embedded .config-row { touch-action: pan-y; }
/* Size to the HOST box, not the viewport — a feed card is ~full screen, but
   the Library preview box is small. 100vw/100dvh slides would spill out
   (content shifted down/right); container-relative keeps it centered. */
.reader-overlay.embedded .slides-container { width: 100%; height: 100%; }
.reader-overlay.embedded .slide { min-width: 100%; width: 100%; height: 100%; }
.reader-overlay.embedded .reader-top {
  padding-top: 10px; /* no safe-area double-up inside the card */
}

/* Left-edge blocker (prevents iOS Safari back-swipe) */
.reader-overlay .edge-blocker {
  position: absolute; left: 0; top: 0; width: 10px; height: 100%;
  z-index: 60; touch-action: none; background: transparent;
}

/* ---- slides (verbatim core) ---- */
.reader-overlay .slides-container {
  display: flex;
  width: 100vw;
  height: 93vh;
  height: 93dvh;
  position: relative;
  left: 0;
  /* No slide transition — advancing replaces one slide with the next instantly
     (the animated swipe was distracting while reading). */
  transition: none;
  transform-origin: center;
  z-index: 1;
}
.reader-overlay .slide {
  min-width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex; justify-content: center; align-items: center;
  background: transparent;
  color: black;
  overflow: visible;
}
.reader-overlay .slide .container {
  display: flex; flex-direction: column; align-items: center;
  position: relative; width: 100%;
  transform-origin: center;   /* fitSlides scales about the center */
}

@media (max-width: 768px) and (orientation: portrait) {
  .reader-overlay.edit-mode .slides-container {
    transform: scale(1.5);
    transform-origin: center;
    width: 100vw; height: 93vh; height: 93dvh; overflow: hidden;
  }
}

.reader-overlay .config-row {
  position: relative;
  display: grid;
  grid-auto-rows: auto;
  justify-content: center;
  grid-column-gap: calc(min(100vh / 19.42, 1.94vw));
  grid-column-gap: calc(min(100dvh / 19.42, 1.94vw));
  cursor: grab;
  user-select: none;
  width: 100vw;
  box-sizing: content-box;
  touch-action: none;
  transition: opacity .12s ease;
  background: transparent;
  overflow: visible !important;
  font-family: 'reader-regular', sans-serif;
}
.reader-overlay.edit-mode .config-row { border: 1px solid #ccc; }
.reader-overlay .config-row.dragging { opacity: 0.25; cursor: grabbing; z-index: 10; }

/* Symbols row: the font comes from the content's displayconfig (inline
   style). Never let the browser synthesize or ligate the marker glyphs. */
.reader-overlay span.symbols-line {
  font-synthesis: none;
  font-variant-ligatures: none;
  unicode-bidi: isolate;
}

.reader-overlay .grid-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  white-space: nowrap; overflow: visible !important; position: relative;
}
.reader-overlay .grid-cell span { position: relative; z-index: 1; }

/* Karaoke: the word currently being sung (only when wordtimes.json exists) */
.reader-overlay .grid-cell.word-hl span {
  color: var(--accent);
  transition: color 120ms ease-out;
}

.reader-overlay .sentence_translation {
  text-align: center;
  font-family: 'reader-regular';
  white-space: nowrap;
}

.reader-overlay .divider_line {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 0 .5vh 0; width: 100%;
}
.reader-overlay .divider_line .divider-bar { width: 100%; border-top: 2px dashed black; height: 0; margin: 0 0 .5vh 0; }
.reader-overlay .divider_line .divider-label { font-size: calc(min(100vh / 60, 5.34vw)); font-size: calc(min(100dvh / 60, 5.34vw)); color: #555; text-align: center; }

.reader-overlay .white_space { width: 100%; height: 1.5vh; transition: background .2s ease; }
.reader-overlay.edit-mode .white_space { background: whitesmoke; }

.reader-overlay .placeholder { height: 1px; background: #007bff55; width: 100%; border-radius: 2px; margin: 0; }
.reader-overlay .ghost {
  position: fixed; z-index: 9999; opacity: 0.95; pointer-events: none;
  background: white; box-shadow: 0 8px 20px rgba(0,0,0,0.25); border-radius: 4px;
  transform-origin: left top;
}

/* ---- chrome (restyled) ---- */
.reader-overlay .reader-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  pointer-events: none;
}
.reader-overlay .reader-top > * { pointer-events: auto; }
.reader-overlay .icon-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
  color: #1d1d1f;
}
.reader-overlay .icon-btn svg { width: 19px; height: 19px; fill: currentColor; }
.reader-overlay .icon-btn.on { color: #ff375f; }
.reader-overlay .top-actions { display: flex; gap: 10px; }
.reader-overlay .pill-btn {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.78); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card); font-size: var(--text-sm); font-weight: 600;
  color: #1d1d1f;
}
.reader-overlay .pill-btn.danger { color: var(--danger); }
.reader-overlay.edit-mode .reader-back { display: none; }

.reader-overlay .controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(7vh + var(--safe-bottom));
  height: calc(7dvh + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  z-index: 50;
  background: linear-gradient(to top,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.85) 60%,
      rgba(255,255,255,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.reader-overlay .controls button {
  font-size: min(7vh, 9.1vw);
  font-size: min(7dvh, 9.1vw);
  position: absolute; bottom: var(--safe-bottom);
  color: #1d1d1f;
  display: flex; align-items: center;
  height: 7vh;
  height: 7dvh;
}
.reader-overlay .controls button svg { height: min(4.6vh, 6vw); height: min(4.6dvh, 6vw); width: auto; fill: currentColor; }
.reader-overlay .controls .txt-btn { font-size: min(2.6vh, 4.2vw); font-size: min(2.6dvh, 4.2vw); font-weight: 600; }
.reader-overlay #r-autoplay { left: 3vw; color: var(--ink-tertiary); }
.reader-overlay #r-autoplay.on { color: var(--accent); }
.reader-overlay #r-prev { left: 30vw; }
.reader-overlay #r-play { left: 50%; transform: translateX(-50%); }
.reader-overlay #r-next { right: 30vw; }
.reader-overlay #r-speed { right: 3vw; font-weight: 700; }
@media (orientation: landscape) {
  .reader-overlay .controls { height: calc(5.5vh + var(--safe-bottom)); height: calc(5.5dvh + var(--safe-bottom)); }
  .reader-overlay .controls button { font-size: min(5.5vh, 6vw); font-size: min(5.5dvh, 6vw); height: 5.5vh; height: 5.5dvh; }
}
.reader-overlay.edit-mode .controls { display: none; }