/*
 * Библиотека «Дороги через Хаос» в палитре и типографике игры (library-heroes-rewrite 1).
 *
 * Лист статичный: страницы Библиотеки (`/encicl/*.html`, генератор `scripts/gen-encicl.mjs`) и страницы
 * вещей (`/encicl/object/**`, бэкенд `EnciclRenderer`) живут без сборки SPA, поэтому `index.css` с Tailwind
 * сюда не подключается — нужные значения скопированы в блок `--lib-*` ниже. Тест
 * `src/test/encicl-css.test.ts` сверяет каждое значение `--lib-*` с `src/index.css` и нить гаттера с
 * `.app-gutter`: палитра Библиотеки не разъедется с игрой молча.
 *
 * Скелет страницы: `body.lib` → `header.lib-header` (логотип, вкладки `.lib-tab`, «В игру» `.lib-play`) →
 * `.lib-frame` (гаттер · `main.lib-main` · гаттер) → крошки `.lib-crumbs`, панель `article.lib-article`,
 * подвал `.lib-foot`. Форумный `forum.css` остаётся форуму «Летописи» и здесь не нужен: канон-классы
 * карточек вещей и старых html-вставок (`table.g`, `a.norm`, `a.n`, `.inup`, `.btn`, `#code`, …) перенесены
 * в конец листа и перекрашены.
 */

/* Токены. Откуда значения (строки src/index.css на 2026-10-20):
   body.theme-game ~56 (фон #dedede, текст #000000, шрифт Verdana…), ссылки ~66 (#40404a),
   .game-h/.game-h4 ~79 (#8f0000, Arial), панель ~110 (#e9e9e9 / #b0b0b0), .btn ~124 (#504f4c, #dfdfdf,
   #9a9996), .town-header/.town-nav-link ~898–929 (#262626, #dfddd3, #817a63, #3a3a40, #1b1b1b),
   .app-gutter ~1002 (#3a342d, #241f1b, #4d463d, золото нити #d9a441), .caravan-card ~1523 (кант #d9a441),
   .town-block ~973 (#cdcdcd), .capital-frame-note ~1318 (#f3f1ec), .hunt-state ~1513 (#6a4a08),
   .fight-outcome-box ~888 (поражение #8a1a1a), чат ~144 (лента #fafafa), .rep-until (#555),
   плашки (#b8932f, фокус #ffd85a). */
:root {
  --lib-bg: #dedede;
  --lib-panel: #e9e9e9;
  --lib-border: #b0b0b0;
  --lib-block: #cdcdcd;
  --lib-row: #fafafa;
  --lib-row-alt: #eee;
  --lib-text: #000000;
  --lib-dim: #555;
  --lib-link: #40404a;
  --lib-title: #8f0000;
  --lib-head: #262626;
  --lib-head-text: #dfddd3;
  --lib-tab-hover: #3a3a40;
  --lib-tab-active: #817a63;
  /* В игре текст активной вкладки #1b1b1b: на #817a63 это 4,0:1 — ниже 4,5. Чёрный даёт 4,9:1. */
  --lib-tab-active-text: #000000;
  --lib-ink: #1b1b1b;
  --lib-gold: #d9a441;
  --lib-gold-dark: #b8932f;
  --lib-gold-text: #6a4a08;
  --lib-focus: #ffd85a;
  --lib-warn: #8a1a1a;
  --lib-note-bg: #f3f1ec;
  --lib-btn: #504f4c;
  --lib-btn-text: #dfdfdf;
  --lib-btn-border: #9a9996;
  --lib-white: #fff;
  --lib-gutter: #3a342d;
  --lib-gutter-dark: #241f1b;
  --lib-gutter-mid: #4d463d;
  --lib-font: Verdana, Arial, Helvetica, Tahoma, sans-serif;
  --lib-font-head: Arial, sans-serif;
}

/* ---------------------------------------------------------------- База */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.lib {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0;
  background: var(--lib-bg); color: var(--lib-text);
  font-family: var(--lib-font); font-size: 12px; line-height: 1.5;
}
body.lib a, body.lib a:visited { color: var(--lib-link); font-weight: bold; text-decoration: none; }
body.lib a:hover { text-decoration: underline; }
body.lib a:focus-visible, body.lib summary:focus-visible { outline: 2px solid var(--lib-focus); outline-offset: 1px; }

/* ---------------------------------------------------------------- Шапка (как .town-header) */
.lib-header {
  display: flex; align-items: center; gap: 4px 10px; flex: none; min-width: 0;
  padding: 3px 10px 0; padding-top: max(3px, env(safe-area-inset-top));
  padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right));
  background: var(--lib-head); color: var(--lib-head-text); border-bottom: 2px solid var(--lib-tab-active);
  font-size: 12px; line-height: 1.3;
}
.lib-logo { display: block; flex: none; margin-bottom: 3px; line-height: 0; }
/* logo.png — карточка 1200×630 с надписью посередине: кадрируем полосу с надписью, а не ужимаем всю карточку. */
.lib-logo img { display: block; width: 170px; height: 28px; object-fit: cover; object-position: 50% 52%; border-radius: 2px; }
.lib-nav {
  display: flex; align-self: flex-end; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lib-nav::-webkit-scrollbar { display: none; }
body.lib .lib-tab, body.lib .lib-tab:visited {
  flex: none; padding: 5px 10px; border-radius: 3px 3px 0 0;
  color: var(--lib-head-text); font-weight: bold; white-space: nowrap; text-decoration: none;
}
body.lib .lib-tab:hover { color: var(--lib-white); background: var(--lib-tab-hover); text-decoration: none; }
body.lib .lib-tab.active { color: var(--lib-tab-active-text); background: var(--lib-tab-active); }
/* «В игру» — золотая кнопка в духе .btn-primary. */
body.lib .lib-play, body.lib .lib-play:visited {
  flex: none; margin: 0 0 3px auto; padding: 4px 14px; border: 1px solid var(--lib-gold-dark); border-radius: 3px;
  background: var(--lib-gold); color: var(--lib-ink); font-weight: bold; white-space: nowrap; text-decoration: none;
}
body.lib .lib-play:hover { filter: brightness(1.1); text-decoration: none; }

/* ---------------------------------------------------------------- Рама: гаттеры и колонка */
.lib-frame { display: flex; flex: 1 0 auto; align-items: stretch; min-width: 0; }
/* Та же нить, что .app-gutter игры (chat-sender-native 4): тёплый градиент, золотая нить с ромбами, шаг 48 px. */
.lib-gutter {
  flex: 0 0 10px; width: 10px; min-width: 10px;
  background-color: var(--lib-gutter);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='48' viewBox='0 0 10 48'%3E%3Cpath d='M5 0V48' stroke='%23d9a441' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath d='M5 19.5 7.6 24 5 28.5 2.4 24Z' fill='%23d9a441'/%3E%3Ccircle cx='5' cy='6' r='1.1' fill='%23d9a441' fill-opacity='.75'/%3E%3Ccircle cx='5' cy='42' r='1.1' fill='%23d9a441' fill-opacity='.75'/%3E%3C/svg%3E"), linear-gradient(90deg, var(--lib-gutter-dark) 0%, var(--lib-gutter-mid) 50%, var(--lib-gutter-dark) 100%);
  background-repeat: repeat-y, no-repeat;
  background-size: 10px 48px, 100% 100%;
  background-position: center top, 0 0;
}
.lib-main {
  box-sizing: border-box; flex: 1 1 auto; width: 100%; max-width: 920px; min-width: 0; margin: 0 auto;
  padding: 12px 16px 16px;
}
.lib-crumbs { margin: 0 0 8px; font-size: 11px; color: var(--lib-dim); overflow-wrap: anywhere; }
.lib-crumbs span { color: var(--lib-text); }
.lib-foot { margin: 12px 0 0; font-size: 10px; color: var(--lib-dim); text-align: center; }

/* ---------------------------------------------------------------- Статья на панели */
.lib-article {
  box-sizing: border-box; min-width: 0; padding: 16px 20px;
  background: var(--lib-panel); border: 1px solid var(--lib-border);
  overflow-wrap: break-word;
  /* Страховка от старых html-вставок шире колонки: прокручивается панель, а не страница. */
  overflow-x: auto;
}
.lib-article a { overflow-wrap: anywhere; }
.lib-article p { margin: 0 0 8px; }
.lib-article ul, .lib-article ol { margin: 0 0 8px; padding-left: 22px; }
.lib-article li { margin: 2px 0; }
.lib-article li::marker { color: var(--lib-gold-dark); }
.lib-article ol > li::marker { color: var(--lib-dim); font-weight: bold; }
.lib-article > :last-child { margin-bottom: 0; }
.lib-main img { max-width: 100%; height: auto; border: 0; }
.lib-article blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--lib-border); color: var(--lib-dim); }

/* Заголовки как в игре: тёмно-красный Arial жирным. */
body.lib .game-h, .lib-article h1 {
  margin: 0 0 12px; color: var(--lib-title); font-family: var(--lib-font-head); font-size: 18px; font-weight: bold;
  line-height: 1.25; text-align: center;
}
body.lib .game-h4, .lib-article h2 {
  margin: 18px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--lib-border);
  color: var(--lib-title); font-family: var(--lib-font-head); font-size: 14px; font-weight: bold; line-height: 1.3;
  text-align: left;
}
.lib-article h3 { margin: 14px 0 4px; color: var(--lib-title); font-family: var(--lib-font-head); font-size: 13px; font-weight: bold; }
.lib-article h4, .lib-article h5 { margin: 10px 0 4px; font-family: var(--lib-font-head); font-size: 12px; font-weight: bold; }
.lib-article > h1:first-child + h2, .lib-article > .game-h:first-child + .game-h4 { margin-top: 0; }

/* ---------------------------------------------------------------- Таблицы (как .stable на экранах) */
.lib-table-wrap { max-width: 100%; margin: 6px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lib-main .lib-table-wrap > table, .lib-main .lib-table-wrap > table.stable { margin: 0; }
.lib-main table.stable {
  width: 100%; margin: 6px 0 10px; border-collapse: collapse; border-spacing: 0;
  background: var(--lib-row); border: 1px solid var(--lib-border);
}
.lib-main table.stable th, .lib-main table.stable td {
  padding: 4px 6px; border: 1px solid var(--lib-border); text-align: left; vertical-align: top;
}
.lib-main table.stable th, .lib-main table.stable thead td {
  background: var(--lib-btn); color: var(--lib-btn-text); font-weight: bold; white-space: nowrap;
}
.lib-main table.stable tbody tr:nth-child(even) td { background: var(--lib-row-alt); }
.lib-main table.stable caption { padding: 0 0 4px; font-weight: bold; text-align: left; }

/* ---------------------------------------------------------------- Врезки, числа, значки */
.lib-note {
  margin: 10px 0; padding: 8px 12px;
  background: var(--lib-note-bg); border: 1px solid var(--lib-border); border-left: 3px solid var(--lib-gold);
}
.lib-note > :last-child { margin-bottom: 0; }
.lib-note-tip > b:first-child { color: var(--lib-gold-text); }
.lib-note-warn { border-left-color: var(--lib-warn); }
.lib-note-warn > b:first-child { color: var(--lib-warn); }
.lib-fact { font-weight: bold; white-space: nowrap; }
.lib-icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.15em; }
.lib-dim { color: var(--lib-dim); font-weight: normal; }

/* ---------------------------------------------------------------- Оглавление */
.lib-book {
  box-sizing: border-box; margin: 0 0 14px; padding: 12px 18px 14px;
  background: var(--lib-panel); border: 1px solid var(--lib-border); border-top: 3px solid var(--lib-gold);
}
.lib-article .lib-book { padding: 10px 0 0; background: none; border-width: 3px 0 0; }
body.lib .lib-book > .game-h { margin: 0 0 4px; font-size: 16px; text-align: left; }
.lib-lead { margin: 0 0 10px; color: var(--lib-dim); }
.lib-chapter { margin: 6px 0; background: var(--lib-row); border: 1px solid var(--lib-border); }
.lib-chapter > summary {
  position: relative; display: block; padding: 6px 10px 6px 26px; cursor: pointer; list-style: none;
  background: var(--lib-block); font-weight: bold;
}
.lib-chapter > summary::-webkit-details-marker { display: none; }
.lib-chapter > summary::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 0; height: 0; transform: translateY(-50%);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--lib-ink);
  transition: transform 0.15s;
}
.lib-chapter[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.lib-chapter > summary:hover { background: var(--lib-panel); }
.lib-chapter[open] > summary { border-bottom: 1px solid var(--lib-border); }
.lib-list { margin: 0; padding: 6px 10px 8px 28px; }
.lib-list li { margin: 3px 0; }
.lib-list li::marker { color: var(--lib-gold-dark); }

/* ---------------------------------------------------------------- Канон-классы (перенос из forum.css)
   Страницы вещей сервера (`EnciclRenderer.card`) и html-вставки старых статей опираются на классы
   форумного листа 2006 года. Раскладка та же (картинка вещи слева, подписи и две колонки справа),
   цвета — игры: рамки #b0b0b0, светлые ячейки, ссылки #40404a. */

/* Карточка вещи: `table.g` с cellspacing=1 — фон таблицы виден линиями между ячейками. */
.lib-main table.g { max-width: 100%; margin: 0 auto 10px; border-collapse: separate; border-spacing: 1px; background: var(--lib-border); }
.lib-main table.g[width="480"] { width: 100%; max-width: 480px; }
.lib-main table.g > tbody > tr > td, .lib-main table.g > tr > td { background: var(--lib-row); vertical-align: top; }
/* Ячейка картинки (td width=80) — серая, как канон #C7C7C7. */
.lib-main table.g > tbody > tr > td:first-child[width="80"], .lib-main table.g > tr > td:first-child[width="80"] {
  background: var(--lib-block); vertical-align: middle; text-align: center;
}
.lib-main table.g table { border-collapse: collapse; }
.lib-main table.g td { line-height: 1.45; }
.lib-main hr { height: 0; margin: 4px 0; border: 0; border-top: 1px solid var(--lib-border); }
.lib-main .tables_newlvl td, .lib-main tr.tables_newlvl { background: var(--lib-block); }
/* Ссылки канона: a.norm (было #CC9966 11px под логотипом) и a.n (#003388) — ссылки игры. */
body.lib a.norm, body.lib a.norm:visited, body.lib a.n, body.lib a.n:visited { color: var(--lib-link); font-weight: bold; font-size: inherit; }
/* Подписи и мелочь. */
.lib-main .smallb { font-size: 10px; color: var(--lib-dim); }
.lib-main .small { font-size: 10px; color: var(--lib-dim); }
.lib-main .medium { font-size: 11px; }
.lib-main .large { font-size: 14px; }
.lib-main .h3 { font-size: 16px; font-weight: bold; }
.lib-main .date { font-size: 10px; color: var(--lib-title); }
.lib-main .error { padding: 12px 0; color: var(--lib-title); font-size: 12px; font-weight: bold; text-align: center; }
/* Фоны ячеек канона — в серой гамме игры. */
.lib-main .d, .lib-main .l { background-color: var(--lib-row-alt); }
.lib-main .g, .lib-main .w { background-color: var(--lib-row); }
.lib-main .border { background-color: var(--lib-border); }
.lib-main .bg6, .lib-main .bg5 { background-color: var(--lib-block); }
.lib-main .bg4 { background-color: var(--lib-btn); color: var(--lib-btn-text); }
/* Поля и кнопки канона: .inup (поле), .btn (тёмная кнопка игры). */
.lib-main input, .lib-main select, .lib-main textarea, .lib-main .inup {
  border: 1px solid var(--lib-border); background: var(--lib-white); color: var(--lib-text);
  font-family: var(--lib-font); font-size: 12px;
}
.lib-main .btn {
  padding: 2px 8px; border: 1px solid var(--lib-btn-border); background-color: var(--lib-btn); color: var(--lib-btn-text);
  font-family: var(--lib-font); font-size: 12px; cursor: pointer;
}
.lib-main .btn:hover { background-color: var(--lib-gutter-mid); }
/* Блок кода форума. */
.lib-main #code, .lib-main pre, .lib-main code {
  font-family: 'Courier New', Courier, monospace; font-size: 12px;
}
.lib-main #code, .lib-main pre {
  margin: 8px 0; padding: 8px 10px; overflow-x: auto; background: var(--lib-row); border: 1px solid var(--lib-border);
  text-align: left; white-space: pre-wrap;
}
/* Списки «Правил пользования форумом». */
.lib-main ol.main { list-style-type: upper-roman; }
.lib-main li.main { margin: 14px 0 8px; font-weight: bold; }
.lib-main li.main > * { font-weight: normal; }
.lib-main ul.sub { list-style-type: disc; }
/* Обёртки старой страницы (если попадут во вставку): без бежевого фона и фиксированных 760 px. */
.lib-main table.e, .lib-main table.el, .lib-main table.copy { width: 100%; max-width: 100%; background: none; border: 0; color: inherit; }
.lib-main td.txt { padding: 0; text-align: left; }
/* Страница вещи (сервер): большая картинка по центру, как в канон-ячейке td.txt; карточки — по левому краю. */
.lib-item { text-align: center; }
.lib-item table.g, .lib-item > div[align] { text-align: left; }
/* Содержание раздела предметов (сервер): группы списком. */
.lib-item > div[align="left"] > ul { margin: 0; padding-left: 18px; }
.lib-item > div[align="left"] > ul > li { margin: 6px 0; font-weight: bold; }
.lib-item > div[align="left"] > ul > li > ul { font-weight: normal; }

/* ---------------------------------------------------------------- Телефон: одна колонка */
@media (max-width: 640px) {
  body.lib { font-size: 14px; }
  .lib-gutter { display: none; }
  .lib-header { flex-wrap: wrap; gap: 4px 8px; padding: 4px 8px 0; padding-top: max(4px, env(safe-area-inset-top)); }
  .lib-logo { order: 1; margin-bottom: 0; }
  .lib-logo img { width: 146px; height: 24px; }
  body.lib .lib-play { order: 2; margin: 0 0 0 auto; padding: 6px 14px; }
  .lib-nav { order: 3; flex: 1 0 100%; }
  body.lib .lib-tab { padding: 8px 10px; font-size: 13px; }
  .lib-main { padding: 8px; }
  .lib-article { padding: 12px; }
  .lib-crumbs { font-size: 12px; }
  .lib-foot { font-size: 12px; }
  body.lib .game-h4, .lib-article h2 { font-size: 15px; }
  .lib-book { padding: 10px 12px 12px; }
  .lib-chapter > summary { padding-top: 9px; padding-bottom: 9px; }
  .lib-list li { margin: 6px 0; }
  /* Карточка вещи: две колонки «Требуется / Действует» — друг под другом. */
  .lib-main table.g table td[width="50%"] { display: block; width: auto; }
  .lib-main input, .lib-main select, .lib-main textarea, .lib-main .inup, .lib-main .btn { font-size: 14px; }
}