@charset "utf-8";

/* Раздел «Чтение» (underl/L/) — самоучитель чтения по подстрочнику.
   Оформление намеренно повторяет остальной сайт: та же текстура bg.jpg прямо
   на BODY, та же светлая подложка .page, та же гарнитура и те же цвета ссылок,
   что в OTH/SH. Никаких своих находок — раздел должен читаться как часть
   проекта, а не как приложение со стороны. */

@font-face {
  font-family: 'Ezra SIL';
  src: url('fonts/EzraSIL.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --heb: 'Ezra SIL','SBL Hebrew','Taamey Frank CLM','Times New Roman',serif;
  --grk: 'Palatino Linotype','Times New Roman','DejaVu Serif',serif;
  /*
   * РУССКИЙ ИЗ КОРПУСА — не Georgia, и это не вкусовщина, а замер.
   *
   * Перевод в корпусе несёт ударение отдельным знаком U+0301 («суди» + знак +
   * «те»). Georgia этот знак СОДЕРЖИТ, но с собственной шириной: слово рвётся
   * посередине — «суди ́те», — и запасной шрифт делу не помогает, потому что
   * подмены не происходит (знак-то есть). Замер разрыва при 16px: Georgia +8px,
   * Times New Roman, Cambria, Constantia — ровно 0.
   *
   * Починить точечно, одним знаком, нельзя: браузер держит букву вместе со
   * знаком ОДНИМ куском и берёт их из одного шрифта — @font-face с
   * unicode-range на знак проверен и не работает. Поэтому гарнитура меняется у
   * всего текста, где ударение может стоять: глоссы карточек, подвал, строка
   * перевода под словом, словарь блока. Ударений в разделе 12 256 на 1196
   * страницах — это не редкий случай.
   *
   * Constantia выбрана как ближайшая к Georgia из складывающих: тот же тёплый
   * серифный рисунок и такие же СТАРОСТИЛЬНЫЕ цифры. Заодно это возвращает то,
   * чем русский корпуса набран в самом подстрочнике: NT/OT своей гарнитуры не
   * задают вовсе, и там он всю жизнь показывается шрифтом вроде Times.
   */
  --rus: Constantia,'Liberation Serif','Times New Roman',serif;
}

html, body { margin: 0; padding: 0; }
body {
  font-family: Georgia, 'Times New Roman', serif; font-size: 15px;
  background-color: #fdf1da; background-image: url("bg.jpg"); color: #1a1a1a;
  padding: 6px 6px 30px;
}
/* Вложенные каталоги L/G, L/H, L/A лежат уровнем ниже — текстуру им надо
   искать выше. Отдельного правила не пишем: страницы блоков подключают ту же
   таблицу через ../l.css, а относительный url() в CSS считается ОТ ФАЙЛА
   таблицы, а не от страницы, — поэтому один путь верен для обоих уровней. */

a { color: #123c8c; text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
  background-color: #fdfcf0; border: 1px solid #e2dcc8;
  padding: 8px 14px 22px; max-width: 62em; margin: 0 auto;
}

h1 { font-size: 21px; margin: 10px 0 2px; }
h2 { font-size: 17px; margin: 22px 0 6px; color: #6b1a1a;
     border-bottom: 1px solid #ece6d6; padding-bottom: 3px; }
h3 { font-size: 14px; margin: 14px 0 5px; color: #8a6a2a; font-weight: normal; }
p  { line-height: 1.55; }

/* ---- верхняя полоса: та же роль, что .topline в OTH ---- */
.topline {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: 12px; color: #6a6252;
  border-bottom: 1px solid #d8d0bd; padding-bottom: 5px; margin-bottom: 4px;
}
.topline a { color: #123c8c; }
.topline b { color: #6b1a1a; }

.nav { display: flex; justify-content: space-between; gap: 10px;
       margin-top: 22px; border-top: 1px solid #ece6d6; padding-top: 8px; font-size: 13px; }
.nav span.off { color: #b3ab98; }

/* ---- шрифты исходных языков ---- */
.gk { font-family: var(--grk); }
.hb { font-family: var(--heb); direction: rtl; unicode-bidi: isolate; }

/* ---- произношение ----
   Строка чтения ставится под словом только при включённом флажке. Пока он
   выключен, слова остаются обычным строчным текстом — иначе inline-block
   менял бы разбивку строк даже тогда, когда произношение никому не нужно.
   Само чтение всегда слева направо: это русская запись, а не исходный язык. */
/* <w> — обёртка слова (нестандартный тег ради размера, см. lib/learn/pages.js).
   Пока произношение выключено, это обычный строчный элемент и текст течёт как
   всегда; включённый флажок вешает на body класс trl-on. */
w { font: inherit; }
w > i { font-style: normal; }
w > .tr { display: none; }
body.trl-on .txt w,
body.trl-on .card .hw w,
body.trl-on .foot w.hd,
body.trl-on table.t w { display: inline-block; text-align: center; vertical-align: top; }
body.trl-on .txt { line-height: 1.35; }
body.trl-on .txt.rtl { line-height: 1.45; }
body.trl-on w > .tr {
  display: block; font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px; line-height: 1.3; color: #8a6a2a;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}
.foot .tr, .card .tr, table.t .tr { font-size: 11px; }
/* Невыученное слово помечено пунктиром — теперь это класс на самом <w>. */
w.rw { border-bottom: 1px dotted #b09a6a; }
.foot w.hd { font-size: 16px; font-weight: bold; }

/* ---- русский перевод ----
   Ровно та же механика, что у произношения, и намеренно: строка под словом
   появляется только по нажатию «глаза», а пока он не нажат, текст остаётся
   чистым — раздел учит читать, а не разбирать. Строка перевода всегда НИЖЕ
   строки чтения (порядок держит l.js) и всегда слева направо: это русский. */
w > .ru { display: none; }
body.ru-on .txt w { display: inline-block; text-align: center; vertical-align: top; }
body.ru-on .txt { line-height: 1.35; }
body.ru-on .txt.rtl { line-height: 1.45; }
body.ru-on w > .ru {
  display: block; font-family: var(--rus);
  font-size: 12.5px; line-height: 1.3; color: #4a4234;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}

/* Связный перевод: лежит в странице всегда, показывается тем же «глазом».
   Набран мельче текста и на своей подложке — это не вторая колонка чтения, а
   проверка себя после него. */
.lit { display: none; }
body.ru-on .lit {
  display: block; margin: 10px 0 2px; padding: 6px 9px 7px;
  background: #fffdf4; border: 1px solid #ece6d6; border-radius: 3px;
  font-size: 14px; line-height: 1.6; color: #2a2118; text-align: left;
}
.lit .lh { display: block; font-size: 11px; color: #8a8272; margin-bottom: 2px; }
.lit .lv { font-size: 10px; color: #a03030; vertical-align: super; margin: 0 3px 0 2px; }
.lit .lg { display: block; font-size: 11px; color: #8a8272; margin-top: 4px; }

/* «Глаз» — переключатель перевода справа от заголовка. Значок и подпись
   дописывает l.js; здесь только вид. */
.eye {
  cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: normal;
  color: #8a8272; margin-left: 10px; vertical-align: 1px;
}
.eye:hover { color: #6b1a1a; }
.eye b { font-weight: normal; margin-left: 3px; }
.eye svg { vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; }
.eye svg .sl { display: none; }
.eye.on { color: #2f6b4f; }
.eye.on svg .sl { display: inline; }

/* Панель над страницей: тот же вид, что полоса над главой подстрочника. */
.toggles { white-space: nowrap; }
.toggles label { margin-right: 8px; cursor: pointer; }
.toggles select {
  font-family: inherit; font-size: 12px; color: #4a4234;
  background: #fffdf4; border: 1px solid #cfc7b0; border-radius: 3px; padding: 0 2px;
}

/* ---- карточки новых слов ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 7px; }
.card { border: 1px solid #e6e0cd; background: #fffdf4; border-radius: 3px; padding: 5px 8px 6px; }
.card .hw { font-size: 20px; line-height: 1.35; color: #2a2118; }
/* Глоссы, подвал и словарь блока — тот же русский из корпуса, та же гарнитура
   (см. --rus): ударение стоит и здесь, «стои́т», «земли́», «нача́ла». */
.card .gl, .foot .fi, table.t td.gl { font-family: var(--rus); }
.card .gl { font-size: 14px; margin-top: 1px; }
.card .meta { font-size: 11px; color: #8a8272; margin-top: 2px; }
.card .fm { font-size: 13px; color: #6a6252; margin-top: 2px; }
.card .ln { font-size: 11px; }
/* Самопроверка: глоссы прячутся, слово остаётся. Открываются щелчком по
   карточке (класс open) или общим переключателем обратно. */
body.hide .card .gl, body.hide .card .meta, body.hide .card .fm { visibility: hidden; }
body.hide .card.open .gl, body.hide .card.open .meta, body.hide .card.open .fm { visibility: visible; }
body.hide .card { cursor: pointer; }

/* ---- текст для чтения ---- */
/* Выключка ПО ЛЕВОМУ краю, не по формату. Греческие и еврейские слова длинные,
   переносов нет, и выключка по формату рвёт строку огромными пробелами — при
   беглом чтении это сбивает сильнее, чем неровный правый край. */
.txt {
  font-family: var(--grk); font-size: 21px; line-height: 1.95;
  margin: 8px 0 4px; text-align: left; hyphens: none;
}
.txt.rtl { font-family: var(--heb); direction: rtl; text-align: right; font-size: 23px; line-height: 2.1; }
.vn { font-size: 11px; color: #a03030; vertical-align: super; margin: 0 3px 0 1px;
      font-family: Georgia, serif; }
/* Невыученное слово: пунктир, не цвет. Цвет тянет глаз и рвёт чтение, а
   задача пометки — только подсказать, что это слово ищется в подвале.
   Само правило стоит ниже, рядом с остальными правилами <w>. */

.foot { margin-top: 10px; border-top: 1px solid #ece6d6; padding-top: 6px; font-size: 13px; }
.foot .fh { font-size: 11px; color: #8a8272; margin-bottom: 3px; }
.foot .fi { display: inline-block; margin: 0 14px 3px 0; white-space: normal; }
.foot .fi i { color: #8a8272; font-style: normal; font-size: 11px; }

/* ---- лестница ступеней ---- */
.lad { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 4px; }
.lad a {
  display: inline-block; min-width: 2.4em; text-align: center;
  border: 1px solid #e2dcc8; background: #fffdf4; border-radius: 3px;
  padding: 2px 4px; font-size: 12px; color: #123c8c;
}
.lad a:hover { background: #f6efdc; text-decoration: none; }
.lad a.done { background: #eef5ef; border-color: #cbe0d1; color: #2f6b4f; }
.lad a.w { background: #f6f1e2; }

.sum { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; margin: 8px 0 2px; }
.sum b { color: #6b1a1a; }

table.t { border-collapse: collapse; font-size: 13px; margin: 6px 0; }
table.t td, table.t th { border: 1px solid #ece6d6; padding: 2px 7px; text-align: left; }
table.t th { background: #f6f1e2; font-weight: normal; color: #6a6252; }
table.t tr.done td { background: #f4faf5; }

.btn {
  display: inline-block; border: 1px solid #cfc7b0; background: #f6f1e2;
  border-radius: 3px; padding: 3px 10px; font-size: 13px; cursor: pointer;
  color: #4a4234; margin-right: 6px;
}
.btn:hover { background: #efe7d0; }
.btn.on { background: #eef5ef; border-color: #cbe0d1; color: #2f6b4f; }

.none { color: #8a8272; font-style: italic; }
.hint { font-size: 12px; color: #8a8272; }
.free { font-size: 13px; }
.free a { margin-right: 10px; white-space: nowrap; }

/* ---- витрина ---- */
.blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 10px; margin: 10px 0; }
.blk { border: 1px solid #e6e0cd; background: #fffdf4; border-radius: 3px; padding: 8px 11px 10px; }
.blk h2 { margin: 0 0 4px; border: 0; padding: 0; font-size: 18px; }
.blk .sample { font-size: 22px; color: #4a4234; margin: 4px 0; }
.blk .st { font-size: 12px; color: #8a8272; }

@media (max-width: 700px) {
  body { padding: 3px 3px 24px; font-size: 15px; }
  .page { padding: 6px 8px 18px; }
  .txt { font-size: 19px; }
  .txt.rtl { font-size: 21px; }
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
}