/* bilingual.css
 * Reading a document beside its translation (AI-ONLINE-FEATURES-PLAN.md,
 * Phase 18, feature 36).
 *
 * One grid row per paragraph, so the two languages stay level with no scroll
 * syncing at all. The cells inherit the reading area's own fonts, spacing and
 * colours, so every reading aid applies to both columns.
 */

.ts-bilingual {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.ts-bilingual-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--panel-bg, rgba(20, 20, 24, 0.92));
  backdrop-filter: blur(6px);
}

.ts-bilingual-label { font-weight: 600; margin-right: auto; }
.ts-bilingual-note { margin: 0; font-size: 0.85rem; opacity: 0.75; }

.ts-bilingual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  align-items: start;
}

.ts-bilingual-cell {
  padding: 0.25rem 0;
  min-width: 0;
  overflow-wrap: break-word;
}

/* The translation is plain text, so it gets the reading area's paragraph look. */
.ts-bilingual-translation p { margin: 0; }

.ts-bilingual-missing::after {
  content: 'not translated';
  font-size: 0.8em;
  opacity: 0.6;
}

/* One side only: the other column is not rendered at all, so the text can use
   the full width rather than sitting in a half-empty grid. */
.ts-bilingual[data-show='original'] .ts-bilingual-grid,
.ts-bilingual[data-show='translation'] .ts-bilingual-grid {
  grid-template-columns: 1fr;
}
.ts-bilingual[data-show='original'] .ts-bilingual-translation,
.ts-bilingual[data-show='translation'] .ts-bilingual-original {
  display: none;
}

/* Swap which language is on the left. */
.ts-bilingual[data-swapped='yes'] .ts-bilingual-original { order: 2; }
.ts-bilingual[data-swapped='yes'] .ts-bilingual-translation { order: 1; }

/* Narrow: one column, the translation under its paragraph, with a line to
   show which pairs belong together. */
@media (max-width: 900px) {
  .ts-bilingual-grid { grid-template-columns: 1fr; gap: 0; }
  .ts-bilingual-translation {
    border-left: 3px solid color-mix(in srgb, currentColor 25%, transparent);
    padding-left: 0.75rem;
    margin-bottom: 1rem;
    opacity: 0.92;
  }
  .ts-bilingual[data-swapped='yes'] .ts-bilingual-original,
  .ts-bilingual[data-swapped='yes'] .ts-bilingual-translation { order: 0; }
}

@media print {
  .ts-bilingual-bar, .ts-bilingual-note { display: none; }
  .ts-bilingual-cell { break-inside: avoid; }
}