.bible-split { display: flex; gap: 0; flex: 1; min-height: 0; padding: 12px; }

.bible-list {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 8.75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Day heading above a group of sections. Quieter and smaller than the items
   it labels, with air above it so the groups read apart; :first-child drops
   that air for the very first one, which would otherwise start the list
   indented from the article next to it. */
.bible-day {
  color: var(--muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 10px 2px;
  margin-top: 12px;
}
.bible-day:first-child { margin-top: 0; }

.bible-list-item {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.35;
}
.bible-list-item:hover { color: var(--fg); background: rgba(128, 140, 160, 0.12); }
.bible-list-item-active {
  color: var(--fg);
  background: rgba(128, 140, 160, 0.18);
  font-weight: 600;
}

.bible-article {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 16.25rem;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  /* The article panel keeps the full width the splitter gives it (tables and
     shell transcripts below need it), but the prose inside is capped, so on a
     wide screen the text column would otherwise hug the panel's border with
     empty space stretching to the right. The side field grows with the window
     to put the column in a margin instead of against the edge, and collapses
     back to the old 22px on narrow ones, where every pixel is text. */
  padding: 18px clamp(22px, 3vw, 56px);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.bible-title { margin: 0 0 10px; font-size: 1.1875rem; }

/* Reading measure. Without a cap a paragraph ran the article's full width —
   ~216 characters per line at 1920px and ~293 at 2560px, where comfortable is
   45–75 and the eye starts losing the next line's start past ~90. Deliberately
   not applied to .bible-table, .bible-shell or .bible-mistake-wrong/-right:
   those hold commands and transcripts, which a narrow column would wrap
   mid-example. */
.bible-intro,
.bible-p { max-width: 68ch; }

.bible-intro { color: var(--fg); margin-bottom: 6px; }
.bible-p { margin: 0 0 10px; }

.bible-train { margin: 4px 0 18px; }

.bible-block { margin: 0 0 18px; }
.bible-block-title { margin: 0 0 8px; font-size: 0.875rem; color: var(--fg); }

.bible-block-text .bible-p,
.bible-block-warn .bible-p { color: var(--fg); }

.bible-block-warn {
  border-left: 3px solid var(--red);
  background: rgba(226, 104, 109, 0.08);
  padding: 10px 14px;
  border-radius: 0 5px 5px 0;
}
.bible-block-warn .bible-block-title { color: var(--red); }

/* Правая колонка таблиц — это описательная проза, и без предела она
   растягивалась до 280 символов в строке при 2560, то есть была самой
   нечитаемой частью теории. Предел ставится на саму таблицу, а не на ячейку:
   у левой колонки width: 1% и nowrap, поэтому она забирает ровно столько,
   сколько нужно команде, и сжимается только колонка с описанием. Сами
   команды при этом по-прежнему не переносятся. */
.bible-table { border-collapse: collapse; width: 100%; max-width: 82ch; }
.bible-table tr { border-bottom: 1px solid var(--line); }
.bible-table tr:last-child { border-bottom: none; }
.bible-table td { padding: 6px 10px 6px 0; vertical-align: top; }
.bible-table-left {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--green);
  white-space: nowrap;
  width: 1%;
}
.bible-table-right { color: var(--fg); }

.bible-shell {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.bible-shell-cmd { color: var(--green); }
.bible-shell-out { color: var(--fg); }

.bible-mistakes { margin-top: 8px; }
.bible-mistake {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
/* pre-wrap, а не normal: в разделах про C эти две строки содержат целые
   функции с отступами и переносами, и при normal все восемь строк кода
   схлопывались в одну — отступы и структура пропадали, а строка растягивалась
   на 278 символов. Для однострочных примеров в разделах про оболочку pre-wrap
   ничего не меняет. Предел ширины при этом нужен, потому что часть примеров —
   не команды, а обычная проза («судорожно нажимать Ctrl+C...»); самая длинная
   настоящая строка кода здесь — 31 символ, так что переноса она не получит. */
.bible-mistake-wrong,
.bible-mistake-right {
  white-space: pre-wrap;
  max-width: 68ch;
}
.bible-mistake-wrong { color: var(--red); }
.bible-mistake-wrong::before { content: '✗ '; }
.bible-mistake-right { color: var(--green); margin-top: 4px; }
.bible-mistake-right::before { content: '✓ '; }
/* Prose, unlike the two lines above it, which are command examples — so it
   gets the same reading measure as the article's paragraphs. */
.bible-mistake-why {
  color: var(--muted);
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: 68ch;
}

@media (max-width: 900px) {
  .bible-split { flex-direction: column; }
  .bible-list { flex-direction: row; flex-wrap: wrap; }
  /* The narrow list wraps into rows, where a heading sharing a line with the
     sections of the previous day would label the wrong ones. */
  .bible-day { flex-basis: 100%; margin-top: 8px; align-self: flex-start; }
}