/* ============================================================
   Classicalia — Parallel-text reader (Latin | English)
   Hover a Latin word for vocabulary and parsing; click a word in
   either column to highlight it with its partner in the other.

   Pair with settext.css and /version2/assets/js/parallel-reader.js
   ============================================================ */

.pr-grid {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.pr-head, .chunk { display: grid; grid-template-columns: 1fr 1fr; }
.pr-head .col-head:first-child { border-right: 1px solid var(--rule); }
.chunk { border-bottom: 1px solid var(--rule-faint); }
.chunk:last-child { border-bottom: none; }
.chunk .latin { border-right: 1px solid var(--rule); padding: 16px 24px 18px 16px; }
.chunk .english { padding: 16px 28px 18px; }

.latin .line { display: flex; align-items: baseline; gap: 10px; }
.lnum {
  font-family: 'Lora', serif; font-style: italic; font-weight: 600;
  font-size: 12px; color: var(--brand); opacity: 0.75;
  min-width: 30px; text-align: right; flex-shrink: 0;
}
.ltext { font-family: 'Lora', serif; font-style: italic; font-size: 17px; color: var(--navy); line-height: 1.75; }
.english { font-family: 'Lora', serif; font-size: 15px; color: var(--ink); line-height: 1.75; }

/* linkable words */
.w, .e { border-radius: 3px; cursor: pointer; transition: background 0.1s, color 0.1s; }
.w { padding: 1px 1px; margin: 0 -1px; }
.e { padding: 1px 0; }
.w:hover, .e:hover { background: #eef3ff; }
.w.sel, .e.sel { background: var(--brand); color: white; box-shadow: 0 0 0 2px var(--brand); }

/* Hide English: blur the translation; clicked words show through */
body.hide-en .english { color: transparent; text-shadow: 0 0 9px rgba(28,37,64,0.45); user-select: none; }
body.hide-en .english .e.sel { color: white; text-shadow: none; }

/* vocabulary tooltip */
.tip {
  position: fixed; z-index: 200; max-width: 320px;
  background: var(--navy); color: white; border-radius: 6px;
  padding: 10px 13px 11px; box-shadow: 0 8px 28px rgba(14,30,63,0.28);
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
}
.tip.on { opacity: 1; transform: none; }
.tip-form { font-family: 'Lora', serif; font-style: italic; font-size: 13px; color: #8fa8cc; margin-bottom: 2px; }
.tip-vocab { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.tip-parse { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #8fb6ff; line-height: 1.5; }

@media (max-width: 860px) {
  .pr-head { display: none; }
  .chunk { grid-template-columns: 1fr; }
  .chunk .latin { border-right: none; padding: 14px 12px 8px 4px; }
  .chunk .english { padding: 4px 14px 16px; font-size: 14.5px; }
  .ltext { font-size: 16px; }
}

/* words the translator added (no Latin equivalent): yellow, with a note */
.sup { cursor: pointer; border-radius: 3px; text-decoration: underline dotted #d9a900; text-underline-offset: 4px; transition: background 0.1s; }
.sup:hover { background: #fdf3cf; }
.sup.sel-sup { background: #f5c842; color: var(--navy); box-shadow: 0 0 0 2px #f5c842; text-decoration: none; }
body.hide-en .english .sup.sel-sup { color: var(--navy); text-shadow: none; }
.tip.note .tip-parse { color: #f5c842; margin-bottom: 4px; }
.tip-note { font-size: 13.5px; line-height: 1.5; }

/* prose: one sense unit per row, no line numbers */
body.prose .chunk .latin { padding: 11px 24px 12px; }
body.prose .chunk .english { padding: 11px 28px 12px; }
body.prose .ltext { font-size: 16.5px; line-height: 1.65; }
body.prose .english { font-size: 14.5px; line-height: 1.65; }