/* =========================================================
   📜 Летопись правок — публичная витрина работы редакции

   Панель фильтров и табло — те же .catalog-filter-panel /
   .catalog-type-filter-type / stats-board, что у /journal/, /catalog/
   и /dictionary/ (подключены через catalog.css). Шапка раздела —
   общий page_hero.css. Здесь только то, что уникально: список
   категорий в один столбец и карточки записей.
   ========================================================= */

.chronicle-page{
    padding-block:2rem 4rem;
}

/*
 * Шапка раздела теперь общая (renderPageHero() — тот же компонент,
 * что у каталога/словаря/слов/свидетельств/проекта): сворачивается,
 * табло входит прямо в неё. Осталась только ссылка на /journal/,
 * которую в лид renderPageHero() не вставить — он экранирует текст
 * целиком (безопасно принимает только простую строку).
 */
.chronicle-journal-note{
    margin:.9rem 0 1.3rem;
    color:var(--color-muted);
    font-size:.85rem;
}
.chronicle-journal-note a{
    color:var(--color-lib);
    font-weight:600;
    text-decoration:none;
}
.chronicle-journal-note a:hover{ text-decoration:underline; }

.chronicle-empty{
    color:var(--color-muted);
    font-size:.9rem;
    padding:1.2rem 0;
}

/* --------- категории фильтра: тот же чип, но один в строку --------- */
.chronicle-cat-list{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
}

/* --------- карточки --------- */
.chronicle-cards{
    display:flex;
    flex-direction:column;
    gap:.6rem;
}
.chronicle-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-left:3px solid var(--pip,var(--color-muted));
    border-radius:10px;
    padding:.7rem .9rem;
    display:flex;
    align-items:center;
    gap:1rem;
}
.chronicle-card.cat-coordinates{ --pip:var(--color-info); }
.chronicle-card.cat-elevation{ --pip:var(--color-chips,#f2c07a); }
.chronicle-card.cat-links{ --pip:var(--color-accent); }
.chronicle-card.cat-historical{ --pip:var(--color-lib); }
.chronicle-card.cat-dictionary{ --pip:var(--color-primary); }
.chronicle-card.cat-words{ --pip:var(--chronicle-s-words); }
.chronicle-card.cat-articles{ --pip:var(--chronicle-s-articles); }
.chronicle-card.cat-audio{ --pip:var(--chronicle-s-audio); }

/*
 * Три колонки, не flex-поток: заголовки разной длины (от «Хозра» до
 * «Безжизненный пейзаж долины Кара-булакь») раньше сдвигали категорию
 * и дату на каждой строке в свою позицию — список было не просканировать
 * глазами. Грид с фиксированной шириной второй/третьей колонки держит
 * категорию и дату на одном месте на всех карточках; сам заголовок
 * обрезается по словам в PHP (chronicleTruncateWords()) — а не пиксельным
 * text-overflow: тот резал бы «Описание перевала Укок» ровно так же, как
 * четырёхсловный заголовок, хотя это ровно три слова и резать не за что.
 */
.chronicle-card__main{
    /*
     * flex:1 — важно: .chronicle-card__main сам сидит внутри
     * display:flex родителя (.chronicle-card). Без flex:1 этот блок
     * получает ширину «по контенту» (auto), и тогда 1fr первой колонки
     * грида нечего делить — он резолвится в размер своего же текста,
     * и вторая/третья колонки на каждой карточке съезжают на своё
     * место вместо общей для всех строк позиции. Ровно это и
     * ломало выравнивание.
     */
    flex:1;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 124px 180px 84px;
    align-items:stretch;
    column-gap:0;
}
/*
 * Без white-space:nowrap — на боевой ширине (рядом с панелью фильтров)
 * фиксированной колонке иногда всё равно тесно даже после обрезки до
 * трёх слов; раньше тут был ещё и text-overflow:ellipsis, и он резал
 * уже обрезанный текст ВТОРОЙ раз ещё короче («Безжизненный пей…»
 * вместо «Безжизненный пейзаж долины…»). Перенос на вторую строку —
 * редкий и безобидный запасной случай, а не порча текста.
 */
.chronicle-card__title{
    min-width:0;
    font-weight:700;
    font-size:.92rem;
    line-height:1.3;
}
.chronicle-card__title a{ color:var(--color-fg); text-decoration:none; }
.chronicle-card__title a:hover{ text-decoration:underline; }

/*
 * -col — сама колонка грида: растянута на всю ширину и высоту трека,
 * держит разделительную черту и внутреннее выравнивание. Бейдж/дата
 * (следующий уровень) сидят внутри уже своим натуральным размером —
 * если сам бейдж сделать растянутым на всю колонку, его фон-пилюля
 * растянется в длинный прямоугольник вместо аккуратной таблетки
 * по тексту.
 */
.chronicle-card__cat-col,
.chronicle-card__author-col,
.chronicle-card__date-col{
    display:flex;
    align-items:center;
    min-width:0;
    padding-left:1rem;
    border-left:1px solid var(--color-border);
}
.chronicle-card__cat-col{ justify-content:flex-start; }
.chronicle-card__author-col{ justify-content:flex-start; }
.chronicle-card__date-col{ justify-content:flex-end; }

/*
 * Пилюль (border-radius:999px) в проекте нет — плашка типа объекта на
 * карточке каталога (.geo-result-type, catalog/card.css) прямоугольная
 * с небольшим скруглением и тонкой рамкой в цвет. Тот же приём здесь,
 * только рамка и фон свои у каждой категории (там плашка одноцветная).
 * Фон и рамка — не готовые -light токены (те бледные, у летописи давали
 * невзрачные полупрозрачные пятна), а свои более насыщенные подобранные
 * вручную оттенки. Текст — не свой оттенок на каждую категорию (тот
 * захардкоженный hex не различал тему): var(--color-fg), тот же
 * основной цвет текста сайта, что сам меняется местами со светлой на
 * тёмную — на фон это не распространяется, он одобрен как есть.
 */
.chronicle-card__cat{
    display:inline-flex;
    align-items:center;
    min-height:19px;
    padding:0 7px;
    border-radius:5px;
    white-space:nowrap;
    font-size:.68rem;
    font-weight:800;
    line-height:1;
    background:var(--color-surface-muted);
    border:1px solid var(--color-border);
    color:var(--color-fg);
}
.chronicle-card.cat-coordinates .chronicle-card__cat{ background:#d7f0ee; border-color:rgba(47,124,120,.3); color:var(--color-fg); }
.chronicle-card.cat-elevation .chronicle-card__cat{ background:#f5dba3; border-color:rgba(154,100,20,.3); color:var(--color-fg); }
.chronicle-card.cat-links .chronicle-card__cat{ background:#d7ecd9; border-color:rgba(79,138,90,.32); color:var(--color-fg); }
.chronicle-card.cat-historical .chronicle-card__cat{ background:#d3e8e7; border-color:rgba(61,122,120,.32); color:var(--color-fg); }
.chronicle-card.cat-dictionary .chronicle-card__cat{ background:#ffdcc2; border-color:rgba(223,79,40,.32); color:var(--color-fg); }
.chronicle-card.cat-words .chronicle-card__cat{ background:#d4ecd0; border-color:rgba(0,131,0,.3); color:var(--color-fg); }
.chronicle-card.cat-articles .chronicle-card__cat{ background:#e2ddf8; border-color:rgba(98,80,214,.3); color:var(--color-fg); }
.chronicle-card.cat-audio .chronicle-card__cat{ background:#fadada; border-color:rgba(227,73,72,.3); color:var(--color-fg); }

/*
 * Насыщенные светлые фоны выше подобраны под светлую тему — на тёмной
 * поверхности они читаются чужеродным светлым пятном. У точно такой же
 * плашки типа объекта в каталоге (.geo-result-type) для тёмной темы
 * уже есть готовое решение — не пять цветных вариантов, а один общий
 * приглушённый вид (catalog/theme_dark.css). Тот же приём здесь.
 */
html[data-theme="dark"] .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-coordinates .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-elevation .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-links .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-historical .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-dictionary .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-words .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-articles .chronicle-card__cat,
html[data-theme="dark"] .chronicle-card.cat-audio .chronicle-card__cat{
    background:var(--color-accent-light);
    border-color:var(--color-border);
    color:var(--color-fg);
}

.chronicle-card__author{
    font-size:.76rem;
    color:var(--color-muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.chronicle-card__date{
    font-size:.76rem;
    color:var(--color-muted);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

/*
 * Уже, чем стоит держать 4 колонки в ряд — заголовок+категория
 * остаются первой строкой, автор+дата второй (те же 2 колонки грида,
 * обычный auto-flow: 4 элемента подряд сами лягут по 2 на строку).
 */
@media (max-width:600px){
    .chronicle-card__main{
        grid-template-columns:minmax(0,1fr) auto;
        row-gap:.3rem;
    }
    .chronicle-card__author-col{
        padding-left:0;
        border-left:0;
    }
    .chronicle-card__date-col{
        padding-left:.6rem;
    }
}

.chronicle-footnote{
    margin-top:1.6rem;
    font-size:.78rem;
    color:var(--color-muted);
}

/* =========================================================
   📊 Инфографика правок — заменяет табло в развёрнутом виде шапки
   раздела (front/js/chronicle_chart.js, renderPageHero():
   $expandedContentHtml). Свёрнутое/развёрнутое переключение — то же
   самое, что уже есть у .page-hero__stats-vertical/.page-hero__stats-row
   (page_hero.css) — своих правил здесь для этого не нужно, блок просто
   сидит внутри .page-hero__stats-vertical.

   Цвета сегментов — НЕ те же, что у бейджей категорий выше: там
   фон-плашка под текст основного цвета сайта, здесь — самостоятельные
   графические метки, отдельно подобранные и проверенные по чек-листу
   dataviz (различимость при дальтонизме, контраст с поверхностью
   в обеих темах — scripts/validate_palette.js). Порядок переменных
   ниже — тот самый порядок, в котором сегменты укладываются в столбик
   (chronicle.php: $chronicleChartCategoryOrder / chronicle_chart.js) —
   сам порядок и есть механизм защиты от дальтонизма (проверка идёт по
   СОСЕДНИМ парам в стеке), менять местами нельзя не прогнав валидатор
   заново.
   ========================================================= */
:root{
    --chronicle-s-coordinates:#2a78d6;
    --chronicle-s-dictionary:#eb6834;
    --chronicle-s-links:#1baf7a;
    --chronicle-s-elevation:#eda100;
    --chronicle-s-historical:#e87ba4;
    --chronicle-s-words:#008300;
    --chronicle-s-articles:#6250d6;
    --chronicle-s-audio:#e34948;

    --chronicle-grid-line:#e1e0d9;
    --chronicle-axis-line:#c3c2b7;
}
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --chronicle-s-coordinates:#3987e5;
        --chronicle-s-dictionary:#d95926;
        --chronicle-s-links:#199e70;
        --chronicle-s-elevation:#c98500;
        --chronicle-s-historical:#d55181;
    --chronicle-s-words:#008300;
    --chronicle-s-articles:#9085e9;
    --chronicle-s-audio:#e66767;

        --chronicle-grid-line:#332d27;
        --chronicle-axis-line:#4a423a;
    }
}
:root[data-theme="dark"]{
    --chronicle-s-coordinates:#3987e5;
    --chronicle-s-dictionary:#d95926;
    --chronicle-s-links:#199e70;
    --chronicle-s-elevation:#c98500;
    --chronicle-s-historical:#d55181;
    --chronicle-s-words:#008300;
    --chronicle-s-articles:#9085e9;
    --chronicle-s-audio:#e66767;

    --chronicle-grid-line:#332d27;
    --chronicle-axis-line:#4a423a;
}

.chronicle-chart-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.5rem;
}
.chronicle-chart-head__total{
    font-size:.78rem;
    color:var(--color-muted);
    white-space:nowrap;
}
.chronicle-chart-head__total b{
    font-size:.95rem;
    color:var(--color-fg);
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

/*
 * Фильтр диапазона — обычный select, стилизованный под тот же чип
 * фильтра, что уже есть на сайте (interaction.md: «Filters & time
 * ranges» — стандартный UI-контрол над графиком, не часть самого
 * графика), а не под нативный вид браузера.
 */
.chronicle-range-select{
    appearance:none;
    -webkit-appearance:none;
    padding:.28rem 1.5rem .28rem .6rem;
    border:1px solid var(--color-border);
    border-radius:6px;
    background:var(--color-surface-muted) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%236f6a63" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right .5rem center;
    color:var(--color-fg);
    font-family:inherit;
    font-size:.72rem;
    font-weight:700;
    cursor:pointer;
}
.chronicle-range-select:focus-visible{
    outline:2px solid var(--chronicle-s-coordinates);
    outline-offset:1px;
}

.chronicle-chart-svg-wrap{ position:relative; }
.chronicle-chart-svg{ display:block; width:100%; height:auto; overflow:visible; }

.chronicle-bar-seg{ cursor:pointer; transition:opacity .12s ease; }
.chronicle-bar-seg:hover{ opacity:.82; }
.chronicle-bar-col.is-hovered .chronicle-bar-seg{ opacity:.82; }
.chronicle-bar-col.is-hovered .chronicle-bar-seg:hover{ opacity:1; }
.chronicle-bar-col:focus-visible{ outline:2px solid var(--color-fg); outline-offset:2px; }

.chronicle-axis-tick{ fill:var(--color-muted); font-size:8.5px; font-family:inherit; }
.chronicle-axis-tick-x{ fill:var(--color-muted); font-size:8px; font-family:inherit; }
.chronicle-grid-line{ stroke:var(--chronicle-grid-line); stroke-width:1; shape-rendering:crispEdges; }
.chronicle-baseline{ stroke:var(--chronicle-axis-line); stroke-width:1; shape-rendering:crispEdges; }

.chronicle-legend{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem .9rem;
    margin-top:.7rem;
    padding-top:.6rem;
    border-top:1px solid var(--color-border-subtle,#ece7dc);
}
.chronicle-legend__item{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.74rem;
    color:var(--color-muted);
}
.chronicle-legend__swatch{
    width:9px;
    height:9px;
    border-radius:2px;
    flex:0 0 auto;
}

/*
 * Подсказка при наведении/фокусе — те же токены fg/surface, что уже
 * везде на сайте, поэтому меняется местами со светлой на тёмную тему
 * сама, без отдельного dark-override (тот же приём, что и у самого
 * .chart-tooltip в мокапе — там лишний override оказался мёртвым
 * кодом именно по этой причине).
 */
.chronicle-chart-tooltip{
    position:absolute;
    z-index:5;
    min-width:150px;
    padding:.55rem .7rem;
    border-radius:8px;
    background:var(--color-fg);
    color:var(--color-surface);
    font-size:.72rem;
    line-height:1.5;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-100%) translateY(-8px);
    transition:opacity .1s ease;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.chronicle-chart-tooltip.is-visible{ opacity:1; }
.chronicle-chart-tooltip__date{
    font-weight:800;
    margin-bottom:.3rem;
    color:var(--color-surface);
}
.chronicle-chart-tooltip__row{
    display:flex;
    align-items:center;
    gap:.4rem;
    justify-content:space-between;
}
.chronicle-chart-tooltip__key{ display:flex; align-items:center; gap:.35rem; opacity:.85; }
.chronicle-chart-tooltip__swatch{ width:7px; height:7px; border-radius:2px; flex:0 0 auto; }
.chronicle-chart-tooltip__val{ font-weight:800; font-variant-numeric:tabular-nums; }

/* =========================================================
   Свёрнутый вид шапки — вместо табло-строки (renderStatsBoard()):
   итог за 30 дней + спарклайн тренда одним акцентным цветом
   (chronicle.php: $chronicleMiniChartHtml / chronicleMiniSparkSvg()).
   Тонкой полосе не хватает места на пять сегментов и подписи
   (см. развёрнутый график выше) — здесь не уменьшенная копия того
   графика, а отдельная, более простая форма: один ряд, легенда ему
   по правилам dataviz не нужна.
   ========================================================= */
.chronicle-mini-chart{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
}
.chronicle-mini-chart__label{
    display:flex;
    flex-direction:column;
    gap:1px;
    white-space:nowrap;
}
.chronicle-mini-chart__caption{
    font-size:.68rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--color-muted);
}
.chronicle-mini-chart__value{
    font-size:1.05rem;
    font-weight:800;
    line-height:1.1;
    color:var(--color-fg);
    font-variant-numeric:tabular-nums;
}
.chronicle-mini-chart__value small{
    font-size:.68rem;
    font-weight:600;
    color:var(--color-muted);
    margin-left:.25rem;
    font-variant-numeric:normal;
}
.chronicle-mini-chart__spark{
    flex:0 1 220px;
    min-width:0;
    height:28px;
    display:block;
}
/*
 * Приглушённый тон столбиков — та же ось/подложка, что и у сетки
 * большого графика (--chronicle-axis-line, тут это не разделитель,
 * а более заметная заливка); --color-border для этого не подходит —
 * тот токен на 8-12% прозрачности, рассчитан на волосяные линии,
 * заливкой столбика читался бы просто пустым местом. «Сегодняшний»
 * столбик — тот же терракотовый акцент, что и у кикера самой шапки
 * (page_hero.css: .page-hero__eyebrow/.page-hero__dot, #b85f32) —
 * тот же приём выделения текущего периода, что и в stat-tile
 * (dataviz: «trend — 12-point sparkline in the de-emphasis hue,
 * current period in the accent»).
 */
.chronicle-mini-chart__bar{ fill:var(--chronicle-axis-line); }
.chronicle-mini-chart__bar--accent{ fill:var(--color-primary); }