/* ==========================================================================
   CHRONICLE — читалка Хроники (§323-325, этап 26)

   Три части экрана.

   **Шапка** — рисованный архив картинкой, поверх него заголовок, счётчик
   открытых записей и полоса прогресса. Картинка одна и та же для всех
   категорий: архив — это место, а не десять разных комнат.

   **Список** — строками, а не плитками. Запись состоит из заголовка и
   короткой строки; плитка заставила бы обрезать и то и другое.
   Непрочитанная помечена точкой, закрытая — замком и приглушена.

   **Плашка о новой записи** живёт вне этого экрана: она всплывает над
   любым разделом и потому лежит здесь же, рядом со своим смыслом, а не
   в стилях уведомлений.

   Цвета, отступы, радиусы и тени — из ui-tokens.css и common.css.
   ========================================================================== */

/* ----- Шапка ------------------------------------------------------------- */

/*
 * Картинка шапки задаётся через `::before`, а не свойством самого блока.
 *
 * Шапка использует геометрию `.trumpamole__skins-hero` (полоса во всю
 * ширину экрана), а у той свой `::before` с фоном раздела скинов. Он
 * непрозрачен и накрывал бы любой фон, назначенный элементу, — на экране
 * Хроники показывался бутик с костюмами. Поэтому подменяется именно
 * псевдоэлемент, заодно снимаются его размытие и увеличение: архив здесь
 * не подложка, а место, и мелкие корешки на полках должны читаться.
 */
.tam-chr__hero {
    position: relative;
    overflow: hidden;
}

.tam-chr__hero::before {
    background-image: url('../chronicle/chronicle_bg.webp?26090901');
    background-position: center 46%;
    filter: none;
    transform: none;
    opacity: 1;
}

/* Затемнение сверху сильнее, чем в середине: заголовок и счётчик лежат
   прямо на светлых полках и без этого не читаются. */
.tam-chr__hero::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-bg-dark) 78%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-dark) 52%, transparent) 44%,
        color-mix(in srgb, var(--ui-bg-dark) 94%, transparent) 100%);
}

/*
 * Счётчик и кнопка «прочитано» в одном ряду.
 *
 * Общий ряд плиток из шапки скинов не переносится и не сжимается: на
 * экране 360px кнопка наезжала на счётчик открытых записей. Здесь ряду
 * разрешён перенос, а обеим частям — сжатие.
 */
.tam-chr__hero .trumpamole__skins-stats-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/*
 * Счётчик тянется во всю полосу, когда стоит один.
 *
 * Держал `flex: 0 1 auto` — и у игрока без непрочитанных записей (а это
 * обычное состояние раздела) в ряду оставался единственный узкий чип,
 * прижатый к левому краю, а справа зияло пустое поле. Ряд с переносом
 * это уже допускает: при двух элементах они делят полосу, при одном он
 * берёт её целиком, как счётчики в магазине и заданиях (§4 рамы).
 */
.tam-chr__hero .trumpamole__skins-chip { flex: 1 1 auto; min-width: 0; }

/* Гнездо значка — выемка §8 рамы; здесь только размер. Радиус и цвет
   значка рама задаёт сама, и обе строки до экрана не доходили. */
.tam-chr__chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

/* Полоса прочитанного тянется во всю ширину шапки.
   Блок заголовка собран колонкой по центру, и без своей ширины полоса
   сжималась до содержимого: на экране от неё оставался тёмный огрызок
   в палец шириной, по которому ничего нельзя было прочесть. */
.tam-chr__bar {
    width: 100%;
    margin: var(--space-2) 0 var(--space-1);
}

/* Кнопка «отметить прочитанным» стоит рядом со счётчиком: она гасит
   точку, но не раскрывает ни одной записи — это разные действия.
   Материал — мелкая кнопка раздела §12 рамы; здесь ей только место в
   ряду и размер подписи. Своя копия дерева стояла ниже рамы по порядку
   файлов и до экрана не доходила. */
.tam-chr__readall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ui-tap-min);
    padding: 0 12px;
    border-radius: var(--ui-radius-sm);
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-body);
    cursor: pointer;
}

.tam-chr__readall:active { transform: translateY(var(--ui-press)); }

/* Та же корпусная кнопка, что ссылки коллекции и хранилища (§12 рамы),
   и материал берётся оттуда: полупрозрачная серо-бурая заливка
   пропускала картинку архива, и на раскрытой книге кнопка выглядела
   фиолетовым пятном. Своей здесь осталась только отбивка от текста —
   всё прочее рама задаёт сама. */
.tam-chr__lab-link {
    /* Кнопка переехала в ряд под описанием (§28 рамы), и отбивку сверху
       задаёт теперь зазор ряда: своя добавлялась к нему и отрывала
       кнопку от текста. Осталась ширина — одна кнопка в ряду не должна
       растягиваться на всю полосу, как две в хранилище. */
    flex: 0 1 auto;
}

/* ----- Вкладки категорий -------------------------------------------------
   Десять категорий в один ряд не помещаются, поэтому ряд прокручивается
   вбок — так же, как вкладки в разделе скинов. */

/* Прокрутку вбок и скрытую полосу ряду задаёт §11 рамы вместе со всеми
   остальными рядами вкладок игры; здесь остались шаг между вкладками и
   отбивка под ними. */
.tam-chr__tabs {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
}

.tam-chr__tabs .trumpamole__skins-tab-btn {
    position: relative;
    flex: 0 0 auto;
    white-space: nowrap;
}

.tam-chr__tab-count {
    margin-left: 6px;
    font-style: normal;
    /* Ступень ниже подписи вкладки — счётчик внутри неё, см. коллекцию. */
    font-size: var(--ui-size-micro);
    opacity: 0.72;
}

/* ----- Поиск ------------------------------------------------------------- */

.tam-chr__search {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--space-2) 0;
}

.tam-chr__search-icon {
    position: absolute;
    left: 12px;
    display: flex;
    color: var(--ui-gold);
    pointer-events: none;
}

/*
 * Поле поиска — утопленная поверхность §8 рамы, и материал берётся
 * оттуда: та же выемка, что поиск клана и поиск офиса в башне.
 *
 * Здесь он был выписан числами (#171346 → #100e33) — это ровно
 * `--ui-row-a` и `--ui-panel-dark`, копия общего материала мимо словаря.
 * Кегль не задаётся вовсе: на телефоне его перебивает запрет зума из
 * `base.css` (16px, иначе iOS увеличивает страницу при вводе).
 */
.tam-chr__search-input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px 0 38px;
    font-family: var(--ui-font-main);
}

.tam-chr__search-input::placeholder { color: var(--ui-text-muted); }

/* Ввод отмечен кромкой, а не свечением: то же, что у поиска по кланам. */
.tam-chr__search-input:focus {
    outline: none;
    border-color: var(--ui-gold-dark);
}

/* ----- Список записей ---------------------------------------------------- */

.tam-chr__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tam-chr__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--tap);
    padding: 10px var(--space-3);
    text-align: left;
    cursor: pointer;
}

.tam-chr__row:active { transform: translateY(var(--ui-press)); }

/* Гнездо значка записи — та же выемка §8 рамы, что значок задания и
   предмет хранилища. Раздел держал её копию числами. */
.tam-chr__row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
}

/* Корешок книги в списке золотой, а не светлый: по цвету значка видно,
   открыта запись или ещё нет (у закрытой он гаснет вместе со строкой).
   Правило написано с родителем — иначе выемка §8 рамы, подключённой
   последней, красит значок общим светлым (§86). */
[data-page="chronicle"] .tam-chr__row-icon {
    color: var(--ui-gold-light);
}

.tam-chr__row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.tam-chr__row-title {
    font-family: var(--ui-font-main);
    font-weight: 800;
    font-size: var(--ui-size-value);
    line-height: 1.25;
    color: var(--ui-text-main);
}

.tam-chr__row-note {
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    line-height: 1.3;
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Непрочитанная запись: рамка теплее и точка справа. Ни цифры, ни
   восклицательного знака — §325 просит тихого показа. */
.tam-chr__row.is-new {
    border-color: var(--ui-gold-dark);
}

.tam-chr__row-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ui-gold-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-gold) 22%, transparent);
}

/*
 * Закрытая запись — тот же материал строки, только приглушённый.
 *
 * Стояли своя заливка числами (#191352 → #131046) и `opacity: .82`:
 * сквозь полупрозрачную строку просвечивал фон страницы, и она читалась
 * сбоем отрисовки, а не запретом. Материал берётся из §7 рамы, состояние
 * показывают кромка, приглушённая подпись и `filter`.
 */
.tam-chr__row.is-locked {
    border-color: var(--ui-panel-edge);
    filter: saturate(.85) brightness(.74);
    color: var(--ui-text-muted);
    cursor: default;
}

.tam-chr__row.is-locked .tam-chr__row-icon { color: var(--ui-text-muted); }
.tam-chr__row.is-locked .tam-chr__row-title { color: var(--ui-text-muted); }

/* ----- Тихая плашка о новой записи (§325) --------------------------------
   Лежит над нижней навигацией, а не поверх всего экрана: она сообщает, а
   не требует ответа. Не тронули — уедет сама. */

/* Материал плашки — общий тост §24 рамы; здесь место, размер и выезд. */
.tam-chr-hint {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tam-nav-h, 68px) + 16px + var(--safe-bottom, 0px));
    z-index: var(--tam-z-sheet);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: min(420px, calc(100vw - 28px));
    padding: 10px var(--space-3);
    transform: translate(-50%, 20px);
    opacity: 0;
    transition: transform var(--tam-t-modal) ease, opacity var(--tam-t-modal) ease;
    pointer-events: none;
}

.tam-chr-hint.is-shown {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.tam-chr-hint__icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--ui-gold-light);
}

.tam-chr-hint__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.tam-chr-hint__title {
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-small);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-gold-light);
}

.tam-chr-hint__name {
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    color: var(--ui-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Единственное действие плашки — золотая кнопка §9.1 рамы; корпус и
   подпись берутся оттуда, здесь размер и место в ряду. Своё золото было
   в две ступени вместо четырёх, а подписи не было задано вовсе: белая
   буква лежала на золоте без обводки. */
.tam-chr-hint__btn {
    flex: 0 0 auto;
    min-height: var(--ui-tap-min);
    padding: 0 14px;
    border-radius: var(--ui-radius-sm);
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-body);
    cursor: pointer;
}

/* Узкий экран: кнопка уезжает под текст, иначе название записи режется
   до двух слов. */
@media (max-width: 360px) {
    .tam-chr-hint { flex-wrap: wrap; }
    .tam-chr-hint__btn { width: 100%; }
}