/* SPDX-FileCopyrightText: 2026 Jinser Kafka <aimer@purejs.icu> */
/* SPDX-License-Identifier: GPL-3.0-or-later */

/* Minimal, reset-style baseline for bilingual content. Projects own the visual
   design; these rules only keep the generated markup readable on their own.
   Parallel pairs are .bilingual-pair grids of .bilingual-lane. Folded pairs are
   a <details class="bilingual-pair"> whose <summary> is the reader lane and
   whose folded lanes follow, with a .bilingual-more hint (a language code and
   a chevron) trailing the summary. */

.bilingual {
  margin-block: 1em;
}

.bilingual-pair {
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
}

.bilingual-lane {
  min-width: 0;
}

.bilingual-lane > :first-child {
  margin-block-start: 0;
}

.bilingual-lane > :last-child {
  margin-block-end: 0;
}

/* Folded, reader-first layout: the reader lane is the disclosure summary and is
   itself the control; the folded lanes follow it. */

.bilingual[data-mode="fold"] .bilingual-pair {
  grid-template-columns: 1fr;
}

.bilingual-pair > summary {
  cursor: pointer;
  list-style: none;
}

.bilingual-pair > summary::-webkit-details-marker {
  display: none;
}

.bilingual-pair > summary:hover,
.bilingual-pair > summary:focus-visible {
  background: rgba(127, 127, 127, 0.08);
}

.bilingual-more {
  font-size: 0.75em;
  opacity: 0.55;
  white-space: nowrap;
  margin-inline-start: 0.5em;
}

.bilingual-more::after {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  margin-inline-start: 0.4em;
}

.bilingual-pair[open] > summary .bilingual-more::after {
  content: "\25BE"; /* ▾ */
}

.bilingual-pair > summary ~ .bilingual-lane {
  margin-block-start: 0.5rem;
  padding-inline-start: 1rem;
}