/* Арабский шрифт — Google отдаёт с unicode-range, поэтому файл качается только
   на страницах с арабскими глифами. @import обязан быть первым правилом. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;700&display=swap');

/* ── RTL (арабский и др.) ─────── */
html[lang="ar"], html[lang="he"], html[lang="fa"], html[lang="ur"] { direction: rtl; }
html[lang="ar"] body { font-family: 'Noto Naskh Arabic', 'Inter', 'Helvetica Neue', Arial, sans-serif; }
/* боковое оглавление статьи — на другую сторону */
html[lang="ar"] .article-nav { left: auto; right: max(12px, calc((100vw - 900px) / 2 - 170px)); }
/* стрелка мозаики — к левому краю и зеркально */
html[lang="ar"] .mosaic-arrow { right: auto; left: 6px; transform: translateY(-50%) scaleX(-1); }
/* латиница/цифры/URL внутри RTL держим как есть */
html[lang="ar"] .meta, html[lang="ar"] .license, html[lang="ar"] .original-title { unicode-bidi: plaintext; }
/* Строки авторов/соавторов — латинские имена внутри RTL: без plaintext bidi перемешивает
   порядок и может распирать строку (юзер-фидбек 2026-07-20: «список авторов даёт прокрутку»).
   plaintext раскладывает каждое имя по его направлению, перенос по словам вместо горизонт. скролла. */
html[lang="ar"] .authors-top, html[lang="ar"] .card-authors,
html[lang="ar"] .related-tags { unicode-bidi: plaintext; overflow-wrap: anywhere; }
/* картинка карточки статьи — обтекание с другой стороны */
html[lang="ar"] .card-img-wrap { float: right; margin: 2px 0 8px 16px; }
/* разделитель чипов категорий — тоже зеркалим */
html[lang="ar"] .cat-chip { border-right: none; border-left: 1px solid var(--border); }
html[lang="ar"] .cat-chip:last-child { border-left: none; }
/* разделитель переключателя языков */
html[lang="ar"] .langs a { border-right: none; border-left: 1px solid var(--border); }
html[lang="ar"] .langs a:last-child { border-left: none; }
/* абзацы текста статей — выравнивание по правому краю */
html[lang="ar"] p { text-align: right; }
/* «мини»-цитата карточки — акцентная полоса с другой стороны */
html[lang="ar"] .card-content .oneliner.card-mini { padding-left: 0; padding-right: 10px; border-left: none; border-right: 2px solid var(--link); }
/* блок «сырого» refine-текста — акцентная полоса с другой стороны */
html[lang="ar"] .refine-raw { border-left: none; border-right: 3px solid #b8860b; }
/* маркированный список открытий учёного — отступ с другой стороны */
html[lang="ar"] .discoveries-list { padding-left: 0; padding-right: 20px; }

/* ═══ bridge42worlds — брендовая дизайн-система (редизайн 2026-07) ═══
   Тёплые нейтралы (айвори/midnight) + акцент охра→циан, serif/mono/sans,
   hairline вместо жёстких рамок. Компоненты красятся через эти токены. */
:root {
    --ink: #0F1626;
    --text: #1e2635;
    --muted: #5A6273;
    --soft: #8A94A6;
    --faint: rgba(15,22,38,.5);
    --link: #2E8AA0;                 /* циан — интерактив + теги */
    --border: rgba(15,22,38,.11);    /* hairline */
    --hair: rgba(15,22,38,.11);
    --hair-soft: rgba(15,22,38,.055);
    --bg: #F4F2EC;                   /* тёплый айвори */
    --surface: #FBFAF6;
    --card-bg: #FBFAF6;
    --tag-bg: #ECE9E1;              /* чипы/пилюли */
    --midnight: #0F1626; --ivory: #ECE9E1;
    --ochre: #C77F3A; --cyan: #2E8AA0;
    --grad: linear-gradient(92deg, #C77F3A, #2E8AA0);
    --author-bg: #f1ecf7; --author-color: #7c5bd6;
    --scientist-bg: #e7f2ec; --scientist-color: #3E8E5A;
    --law-color: #C77F3A;           /* закон = охра */
    --filter-tag-bg: #e6eef1; --filter-author-bg: #f1ecf7; --filter-scientist-bg: #e7f2ec;
    --red: #c0392b;
    --shadow: 0 20px 44px -26px rgba(15,22,38,.34);
    --shadow-sm: 0 10px 24px -18px rgba(15,22,38,.30);
    --radius: 16px; --radius-sm: 12px;
    /* Шрифты — системные, по design-system.md (совпадают с About/деком, без веб-шрифтов) */
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
    /* «Вечерний» мягкий тёмный — фон серо-сланцевый, не чёрный (юзер 2026-07-22) */
    --ink: #ECE9E1;
    --text: #d6d9e1;
    --muted: #9197a5;
    --soft: #767e8d;
    --faint: rgba(236,233,225,.48);
    --link: #6ec3d8;
    --border: rgba(236,233,225,.13);
    --hair: rgba(236,233,225,.13);
    --hair-soft: rgba(236,233,225,.06);
    --bg: #1b1f27;
    --surface: #242832;
    --card-bg: #2a2f3a;
    --tag-bg: #2f3542;
    --ochre: #E4A860; --cyan: #5EBCD2;
    --grad: linear-gradient(92deg, #E4A860, #5EBCD2);
    --author-bg: #2a2436; --author-color: #b79cff;
    --scientist-bg: #16241b; --scientist-color: #5FB07E;
    --law-color: #E4A860;
    --filter-tag-bg: #15232f; --filter-author-bg: #2a2436; --filter-scientist-bg: #16241b;
    --red: #e2685a;
    --shadow: 0 22px 46px -26px rgba(0,0,0,.72);
    --shadow-sm: 0 12px 26px -18px rgba(0,0,0,.6);
}
html[data-theme="dark"] .mosaic-arrow { background: rgba(30,32,34,0.92); }
html[data-theme="dark"] img { opacity: 0.92; }
.theme-toggle {
    background: none; border: 1px solid var(--border); color: var(--soft);
    border-radius: 50%; width: 30px; height: 30px; cursor: pointer;
    font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { color: var(--text); }
.feed-day {
    font-size: 13px; font-weight: 600; color: var(--soft);
    margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.feed-day:first-child { margin-top: 4px; }

/* ── Календарь над архивом (год→месяц→день) ── */
.archive-calendar {
    display: flex; flex-wrap: wrap; gap: 22px 30px; margin: 6px 0 30px;
}
.cal-month { flex: 0 0 auto; }
.cal-mtitle {
    font-size: 13px; font-weight: 600; color: var(--muted);
    margin-bottom: 8px; text-transform: capitalize;
}
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 30px); gap: 3px;
}
.cal-wd {
    font-size: 10px; color: var(--soft); text-align: center;
    line-height: 18px; text-transform: uppercase;
}
.cal-cell {
    position: relative; height: 30px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--soft);
}
.cal-off { color: var(--border); }
.cal-has {
    background: var(--tag-bg); color: var(--text); font-weight: 600;
    text-decoration: none; border: 1px solid var(--border);
}
.cal-has:hover { border-color: var(--link); color: var(--link); }
.cal-dot {
    position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px;
    padding: 0 3px; box-sizing: border-box; border-radius: 8px;
    background: var(--link); color: #fff; font-size: 9px; font-style: normal;
    font-weight: 600; line-height: 15px; text-align: center;
}
html[lang="ar"] .cal-dot { right: auto; left: -5px; }
/* Обложка — по ширине текстовой колонки (620px, как .article-main p), не во всю ширину блока.
   FLUX генерит 1536x1024 (3:2) — контейнер той же пропорции, чтобы ничего не обрезалось
   (квадрат пробовали — съедает слишком много высоты; cover в чужую пропорцию — терял края). */
.ai-cover { margin: 0 0 16px; max-width: 620px; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; }
.ai-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-toggle { display: flex; gap: 6px; justify-content: center; margin: 6px 0 14px; }
.view-toggle button {
    background: none; border: 1px solid var(--border); color: var(--soft);
    width: 34px; height: 30px; border-radius: var(--radius); cursor: pointer; font-size: 15px;
}
.view-toggle button.active { color: var(--text); border-color: var(--link); }
.view-audit-link {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border); color: var(--soft);
    width: 34px; height: 30px; border-radius: var(--radius); font-size: 15px;
    text-decoration: none;
}
.view-audit-link:hover { color: var(--text); border-color: var(--link); }
/* Одна картинка вместо пары бок о бок (юзер-фидбек 2026-07-15: пара по ширине вылезала
   за край текстовой колонки) — .tip-frame даёт стрелочкам точку отсчёта по высоте только
   картинки, подпись вынесена под рамку отдельным элементом (theory-img-pair.js). */
.theory-img-pair { max-width: 680px; margin: 18px 0 28px; }
.tip-frame { position: relative; border-radius: 10px; }
.tip-frame img {
    width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 10px; display: block; cursor: zoom-in;
}
.tip-caption {
    margin: 6px 0 0; font-size: .78rem; color: var(--soft); text-align: center; line-height: 1.4;
}
#kg-graph {
    position: relative; border: 0.5px solid var(--border); border-radius: 12px; background: var(--tag-bg);
    max-width: 900px; margin: 0 auto;   /* выровнено по ширине контента, не 100vw */
}
#kgcanvas { width: 100%; height: 640px; display: block; touch-action: none; cursor: grab; }

/* Мини-граф на странице сущности — встроенный, компактный, по ширине текстовой колонки (620px,
   как .article-main p), слева, не по центру — единообразно с остальными блоками страницы. */
.mini-graph {
    position: relative; max-width: 620px; margin: 18px 0; border: 0.5px solid var(--border);
    border-radius: 12px; background: var(--tag-bg);
}
#minigraph { width: 100%; height: 300px; display: block; touch-action: none; cursor: grab; }
/* Тот же движок и класс на страницах-облаках (◉ на тегах/законах/учёных) — без центра, весь
   knowledge-graph.json целиком, поэтому по ширине контента и повыше, как большой граф-эксплорер
   (юзер-фидбек 2026-07-15: "цинфицировать везде один подход... фирменный подход везде"). */
.mini-graph--full { max-width: 900px; margin: 0 auto; }
.mini-graph--full #minigraph { height: 640px; }
/* Граф статьи — в основной колонке под текстом (620px, юзер-фидбек 2026-07-15: "после текста
   статьи по ширине текста... рамку эту убрать совсем"), без бордера/подложки самой рамки —
   только холст с узлами, единообразно с остальным контентом статьи. */
.mini-graph--article { border: none; background: none; }

/* Кнопка «развернуть на весь экран» — добавляется JS-ом (force-graph.js) во ВСЕ графы разом
   (общий движок), т.к. канвас у каждого графа лежит прямо в этом бордер-боксе. Разворачиваем не
   через Fullscreen API (на iOS Safari поддержка нестабильна для произвольных элементов), а через
   CSS-оверлей на весь вьюпорт — одинаково работает на десктопе и мобиле. */
.graph-fs-btn {
    position: absolute; top: 8px; right: 8px; z-index: 5; width: 26px; height: 26px;
    border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 13px; line-height: 1; opacity: 0.7;
}
.graph-fs-btn:hover { opacity: 1; border-color: var(--link); color: var(--link); }
/* Предупреждение про >100 узлов (force-graph.js) — не мирится под RTL, как и .graph-fs-btn:
   графы сайта принципиально не зеркалятся, кнопка ⛶ всегда физически в углу справа сверху. */
.graph-size-warning {
    position: absolute; top: 8px; left: 8px; right: 40px; z-index: 5;
    font-size: 11px; line-height: 1.4; color: var(--soft);
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 10px; opacity: 0.92;
}
/* Тултип узла графа — общий для главного графа и мини-графов (force-graph.js), появляется у
   курсора при наведении. display управляется JS-ом, не через :hover (канвас — не DOM-узлы). */
.graph-tooltip {
    display: none; position: absolute; z-index: 6; max-width: 220px;
    padding: 5px 9px; border-radius: 6px; font-size: 12px; line-height: 1.4;
    background: #1c1c1e; color: #fff; pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.graph-fs-active {
    position: fixed !important; inset: 0 !important; z-index: 1000;
    max-width: none !important; width: 100vw !important; height: 100vh !important;
    margin: 0 !important; border-radius: 0 !important;
    background: var(--bg) !important;  /* сплошной фон по умолчанию; тумблер ◑ делает прозрачным */
}
.graph-fs-active.graph-fs-transparent { background: transparent !important; }  /* сквозь граф видна страница */
.graph-fs-active canvas { height: 100% !important; }
body.graph-fs-open { overflow: hidden; }
/* В FS предупреждение «>100 узлов, откройте на весь экран» уже неактуально — прячем. */
.graph-fs-active .graph-size-warning { display: none !important; }
/* Тумблер фона — рядом с ✕, только в полноэкранном. */
.graph-fs-bgbtn {
    position: absolute; top: 8px; right: 40px; z-index: 5; width: 26px; height: 26px;
    border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
    display: none; align-items: center; justify-content: center; cursor: pointer;
    font-size: 13px; line-height: 1; opacity: 0.7;
}
.graph-fs-bgbtn:hover { opacity: 1; border-color: var(--link); color: var(--link); }
.graph-fs-active .graph-fs-bgbtn { display: flex; }
/* Оверлей контролов внутри FS — реальные контролы графа переезжают сюда (force-graph.js). */
.graph-fs-controls { display: none; }
.graph-fs-active .graph-fs-controls {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    position: absolute; top: 12px; left: 12px; z-index: 6; max-width: min(92vw, 660px);
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
    opacity: 0.97;
}
/* Внутри оверлея переехавшие label/фильтры не должны тянуть свои страничные отступы. */
.graph-fs-active .graph-fs-controls .mini-graph-label,
.graph-fs-active .graph-fs-controls .mini-graph-filters,
.graph-fs-active .graph-fs-controls .kg-controls { margin: 0; max-width: none; width: 100%; }
.graph-fs-collapse-btn {
    align-self: flex-start; background: var(--card-bg); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px; padding: 2px 9px; font-size: 13px; line-height: 1.4; cursor: pointer;
}
.graph-fs-collapse-btn:hover { border-color: var(--link); color: var(--link); }
.graph-fs-collapse { display: none; }
.graph-fs-collapse.open { display: block; margin-top: 2px; }
.mini-graph-label {
    max-width: 620px; margin: 14px 0 2px; font-size: 13px; color: var(--soft);
    display: flex; align-items: center; justify-content: space-between;
}
/* Иконка «граф знаний» — глиф из 3 узлов+рёбер (currentColor, работает в любой теме) вместо
   эмодзи-паутины 🕸, которая читалась как web/сеть, а не как граф (юзер-фидбек 2026-07-19). */
.ico-graph { width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex: none; }
/* Фильтр типов узлов мини-графа (тег/закон/учёный) — те же чекбоксы, что на большом графе.
   flex-wrap — на широкой колонке (620px, страница тега/закона/учёного) в 1 строку и так
   помещается, ничего не меняет; в узком сайдбаре статьи (160px) не даёт строке чекбоксов
   вылезти за край рамки (юзер-фидбек 2026-07-15: "рамка шире... двигает правый край"). */
.mini-graph-filters {
    max-width: 620px; margin: 4px 0 0; font-size: 11px; color: var(--soft);
    display: flex; flex-wrap: wrap; gap: 6px 12px;
}
.mini-graph-filters:empty { display: none; }
.mini-graph-filters label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.mini-graph-filters input[type="checkbox"] { width: 12px; height: 12px; }
/* Вторая строка — типы связей (не типы узлов выше): кросс-типы (тег↔закон и т.п.) переключаются
   сами при смене узловых типов (js/mini-graph.js), "сам-на-себя" — свободный выбор юзера,
   по умолчанию выключены (юзер-фидбек 2026-07-15). Своя строка — flex-basis:100% рвёт родительский
   flex row на новую строку без отдельного grid/wrapper. */
.mg-edges { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; opacity: .8; }
.mg-edge-label { font-size: 10px; }
.mini-depth-ctrl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.mini-depth-ctrl button {
    width: 18px; height: 18px; padding: 0; border-radius: 50%; line-height: 1; cursor: pointer;
    background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
}
.mini-depth-ctrl button:hover { border-color: var(--link); color: var(--link); }
.mini-depth-ctrl span { min-width: 10px; text-align: center; font-weight: 600; }

/* ── Граф знаний: компактная шапка, панель в одну строку, граф поднят и виден весь на экране ── */
.kg-h1 { margin: 4px auto 6px; font-size: 20px; }
.kg-notice { max-width: 900px; margin: 0 auto 10px; font-size: 12.5px; color: var(--soft); text-align: center; }
#kg-graph #kgcanvas { height: 720px; }
.kg-controls-wrap { max-width: 900px; margin: 12px auto 0; }
.kg-controls-wrap > summary {
    cursor: pointer; font-size: 13px; color: var(--soft); padding: 8px 12px;
    border: 0.5px solid var(--border); border-radius: 10px; background: var(--tag-bg);
    list-style: none; user-select: none;
}
.kg-controls-wrap > summary::-webkit-details-marker { display: none; }
.kg-controls-wrap[open] > summary { margin-bottom: 10px; }

/* ── Граф знаний: панель фильтров — компактно, в одну строку на desktop ── */
.kg-controls {
    max-width: 900px; margin: 0 auto 12px; font-size: 11.5px;
    padding: 12px 16px; border: 0.5px solid var(--border); border-radius: 10px;
}
.kg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 0; }
.kg-row + .kg-row { margin-top: 4px; }
.kg-row strong { color: var(--soft); font-weight: 600; }
.kg-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.kg-row label { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; white-space: nowrap; }
.kg-row input[type="checkbox"] { width: 12px; height: 12px; }
.kg-row button {
    font-size: 11px; padding: 2px 9px; border-radius: 14px; cursor: pointer;
    background: var(--card-bg); border: 1px solid var(--border); color: var(--text); transition: all 0.15s;
}
.kg-row button:hover { border-color: var(--link); color: var(--link); }
/* Три отдельных поля (тег/закон/учёный) — уже, чтобы все влезали в ряд; было одно общее
   поле на все типы — с учётом ~60 узлов один выпадающий список был перегружен/путался. */
.kg-search-input {
    font-size: 11.5px; padding: 3px 8px; border-radius: 14px; width: 130px; flex: 1 1 130px; max-width: 160px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.kg-search-input:focus { outline: none; border-color: var(--link); }

/* Обёртка поля поиска — якорь для выпадашки подсказок (свой список вместо нативного
   datalist: нужен контроль сортировки/подстрочного поиска, datalist это не даёт). */
.kg-search-wrap { position: relative; flex: 1 1 130px; max-width: 160px; }
.kg-search-wrap .kg-search-input { width: 100%; }
.kg-suggest {
    display: none; position: absolute; left: 0; top: calc(100% + 3px); z-index: 40;
    min-width: 100%; max-width: 240px; max-height: 220px; overflow-y: auto;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.14); padding: 3px 0;
}
.kg-suggest.open { display: block; }
.kg-suggest-item { padding: 4px 10px; font-size: 11.5px; cursor: pointer; color: var(--text); white-space: nowrap; }
.kg-suggest-item:hover, .kg-suggest-item.hl { background: var(--tag-bg); color: var(--link); }
.kg-suggest-empty { padding: 4px 10px; font-size: 11px; color: var(--soft); }

/* Выбранные фильтры — одна общая строка чипов под панелью поиска (не по три узких колонки —
   так поле не растягивается по высоте). Строго, без эффектов: тёмный фон + белый текст, никаких
   градиентов/теней/hover-анимаций. Цветная полоска слева — тип (тег/закон/учёный). Кросс-фильтр
   всегда «И», но только МЕЖДУ типами — свой тип от своего же выбора не сужается (см. JS). */
.kg-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 900px; margin: 8px auto 0; }
.kg-chips:empty { display: none; }
.kg-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
    padding: 3px 6px 3px 9px; border-radius: 4px; white-space: nowrap;
    background: #1c1c1e; color: #fff; border-left: 3px solid #666;
}
.kg-chip[data-kind="tag"] { border-left-color: #6C5CE7; }
.kg-chip[data-kind="law"] { border-left-color: #D64545; }
.kg-chip[data-kind="sci"] { border-left-color: #2FA84F; }
.kg-chip-x {
    font-size: 12px; line-height: 1; padding: 0 2px; border: none; background: none;
    color: #fff; opacity: 0.65; cursor: pointer;
}
.kg-chip-x:hover { opacity: 1; }
#kg-depth-minus, #kg-depth-plus {
    width: 20px; height: 20px; padding: 0; border-radius: 50%; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
#kg-depth-val { min-width: 12px; text-align: center; color: var(--text); font-weight: 600; }
.selected-bar:empty, .filters:empty { display: none; }

/* ── Оживление: появление на скролле ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.article-main p { font-size: 16.5px; line-height: 1.8; margin-bottom: 18px; max-width: 620px; }
.reading-time { color: var(--soft); white-space: nowrap; }
.site-stats { text-align: center; font-size: 13px; color: var(--soft); margin: 2px 0 14px; }
.site-stats b { color: var(--text); font-weight: 600; }
.related { margin-top: 26px; }
.related-h { font-size: 14px; font-weight: 600; color: var(--soft); margin-bottom: 8px; }
.related-item {
    display: block; padding: 9px 0; border-top: 1px solid var(--border);
    color: var(--link); text-decoration: none; font-size: 15px;
}
.related-item:hover { color: var(--red); }
.related-oneliner { display: block; font-size: 12.5px; color: var(--soft); margin-top: 2px; line-height: 1.4; }
.au-count { margin-left: 6px; font-size: 11px; color: var(--soft); opacity: 0.8; }
.author-item.recent { border-color: var(--scientist-color); }
.author-item.recent::before { content: "•"; color: var(--scientist-color); margin-right: 3px; font-weight: 700; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

/* ── Top bar ──────────────────── */
/* Ужато до ширины текстовой колонки (680px), а не во всю ширину body (900px) — юзер-фидбек
   2026-07-15: "main далеко от логотипа... надо чтобы было выровнено за счёт сжатия меню,
   а не статьи". Без margin:auto — иначе шапка ЦЕНТРИРУЕТСЯ в 900px body и левый край
   "уезжает" от заголовка/текста статьи; тут нужно единое ЛЕВОЕ выравнивание. */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* 620px, а не 680: правый край шапки (и, значит, последнего элемента — переключателя
       темы) должен совпадать с правым краем ВИДИМОГО контента. Текст статьи и карточки
       ленты ограничены 620px (.article-main > *, .article-card), тогда как контейнерная
       ширина 680px (.article-main, .langs-row) — служебная, невидимая. Меню при этом не
       страдает: collapseNavOverflow() и так безусловно сворачивает его в «⋯». */
    max-width: 620px; margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky; top: 0; z-index: 50;
    background: var(--bg); padding: 8px 0; margin-top: -8px;
}
.logo {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--text);
    text-decoration: none;
}
.logo:hover { color: var(--red); }
.header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Navigation ───────────────── */
/* Расстояние между пунктами меню и убранный "about" — юзер-фидбек 2026-07-15:
   "не умещается всё по ширине... между пунктами меню меньше расстояние, about убрать".
   Сжато ещё раз (10→6px) — после ужатия всей шапки до 680px (ширина статьи) логотип+меню
   перестали помещаться в одну строку и переносились. */
.nav-links { display: flex; gap: 6px; font-size: 13px; }
.nav-links a {
    color: var(--soft); text-decoration: none;
    padding: 2px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); font-weight: 600; border-bottom-color: var(--link); }

/* «…» — сворачивает tags/laws/scientists/authors/graph, когда меню не помещается в 680px
   (собирается JS'ом, см. collapseNavOverflow в search.js — main/theory/★ остаются на виду). */
.nav-more { position: relative; }
.nav-more-btn {
    color: var(--soft); background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 13px; padding: 2px 0; border-bottom: 2px solid transparent; line-height: 1;
}
.nav-more-btn:hover, .nav-more-btn.active { color: var(--text); }
.nav-more-panel {
    display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20;
    min-width: 140px; flex-direction: column; gap: 2px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.nav-more.open .nav-more-panel { display: flex; }
.nav-more-panel a { padding: 6px 10px; border-radius: 6px; border-bottom: none; }
.nav-more-panel a:hover { background: var(--card-bg); }
html[dir="rtl"] .nav-more-panel { left: auto; right: 0; }

/* ── Version slider (бегунок сложности) ───────────────
   Всегда развёрнут целиком в шапке — не попап (было — юзер попросил убрать клик-открытие).
   Точки — <button> (JS-режим, главная/ленты/теги/законы/учёные) или <a href> (режим навигации
   на странице статьи, работает без JS вообще; лево→право = от простого к сложному). */
.version-slider {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--card-bg);
}
/* Фиксированная ширина подписи текущего тира — иначе при смене «Популярно»↔«Мини» ширина
   гуляет и вся шапка (space-between) дёргается (юзер-фидбег 2026-07-20). 66px покрывают самую
   длинную подпись во всех языках; текст центрируем. */
.vs-current { font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; min-width: 66px; text-align: center; }

.vs-track { position: relative; width: 90px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 10px; }
.vs-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px; background: var(--link); transition: width 0.18s ease; }
/* RTL: заливка растёт от "начала" чтения (справа), не от физического left — иначе выглядит так,
   будто прогресс идёт в обратную сторону. .vs-thumb зеркалится в JS (search.js), не тут, — там
   ещё центрирующий transform, который при простой смене left→right пришлось бы тоже инвертировать;
   проще передать в тот же left уже зеркальный процент. */
html[dir="rtl"] .vs-fill { left: auto; right: 0; }
.vs-thumb {
    position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
    background: var(--link); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%); transition: left 0.18s ease; cursor: grab; z-index: 2;
}
.vs-thumb:active { cursor: grabbing; }
.vs-dot {
    position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border-radius: 50%; background: transparent; border: none; cursor: pointer; padding: 0;
    text-decoration: none; z-index: 3;
}
.vs-dot:nth-child(3) { left: 0%; }
.vs-dot:nth-child(4) { left: 33.33%; }
.vs-dot:nth-child(5) { left: 66.67%; }
.vs-dot:nth-child(6) { left: 100%; }
/* RTL (ar): прогрессия "просто→сложно" должна визуально идти справа-налево (справа = "начало"
   чтения), а не left:X% как в LTR — иначе точки/заливка/бегунок ползут в физически неверную
   сторону относительно направления письма. Зеркалим статичные позиции точек; .vs-fill/.vs-thumb
   зеркалятся отдельно (right вместо left) — .vs-fill в CSS ниже, .vs-thumb в JS (search.js). */
html[dir="rtl"] .vs-dot:nth-child(3) { left: 100%; }
html[dir="rtl"] .vs-dot:nth-child(4) { left: 66.67%; }
html[dir="rtl"] .vs-dot:nth-child(5) { left: 33.33%; }
html[dir="rtl"] .vs-dot:nth-child(6) { left: 0%; }
.vs-dot:hover::after { opacity: 1; }
.vs-dot::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
    border-radius: 50%; background: var(--soft); opacity: 0.5; transform: translate(-50%, -50%);
    transition: opacity 0.15s;
}
.vs-dot.active::after { opacity: 0; }

/* ── Homepage intro ───────────── */
/* Раньше — отдельная центрированная строка под шапкой (кружок ℹ️ + разворачивающийся текст),
   болталась по центру и занимала место сама по себе. Теперь — маленький значок-«степень»
   (как ™) сразу у названия сайта, текст — во всплывающем поповере по клику, а не в потоке. */
/* Иконки поиска/календаря — рядом с логотипом, а не в отдельной строке с языками, где они
   "уезжали" далеко вправо и визуально отрывались от заголовка (юзер-фидбек 2026-07-21).
   Общий .top-bar остаётся space-between между этой группой (логотип+иконки) и меню/темой. */
.brand-row { display: flex; align-items: center; gap: 10px; }
.logo-wrap { position: relative; }
.logo-info {
    display: inline-block; vertical-align: super; margin-left: 2px;
    width: 14px; height: 14px; border-radius: 50%; padding: 0; font-size: 9px; line-height: 14px;
    font-family: Georgia, serif; font-style: italic; font-weight: 700; text-align: center;
    background: none; border: 1px solid var(--border); color: var(--soft);
    cursor: pointer; opacity: 0.65; transition: all 0.15s;
}
.logo-info:hover, .logo-info.active { opacity: 1; border-color: var(--link); color: var(--link); }
.intro-popup {
    display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
    width: 340px; max-width: 80vw; text-align: left;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.intro-popup.open { display: block; }
.home-intro { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.home-intro b { color: var(--text); font-weight: 600; }

/* ── Calendar filter (main) ────── */
/* Живёт справа от язык-бара (.langs-row) — редко нужная функция, не должна бросаться в глаза
   отдельной центрированной строкой, как раньше. Панель — выпадашка от кнопки, не по центру страницы. */
.cal-bar { position: relative; flex-shrink: 0; }
.cal-btn {
    width: 24px; height: 24px; padding: 0; font-size: 12px; border-radius: 50%; cursor: pointer;
    background: var(--card-bg, #f5f5f5); border: 1px solid var(--border); color: var(--soft);
    transition: all 0.15s;
}
.cal-btn:hover { border-color: var(--link); color: var(--link); }
.calendar-panel {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    width: 320px; max-width: 80vw; text-align: left;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; max-height: 340px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.calendar-panel.open { display: block; }
.cal-all { font-size: 13px; padding: 6px 4px; cursor: pointer; color: var(--link); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.cal-all:hover { text-decoration: underline; }
.cal-head {
    font-size: 13px; padding: 5px 4px; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; user-select: none;
}
.cal-head::before { content: '▸'; margin-right: 6px; font-size: 10px; color: var(--soft); transition: transform 0.15s; }
.cal-head.open::before { content: '▾'; }
.cal-head:hover { color: var(--link); }
.cal-y { font-weight: 600; }
.cal-m { padding-left: 16px; }
.cal-cnt { font-size: 11px; color: var(--soft); font-weight: 400; }
.cal-days { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 8px 24px; }
.cal-day {
    font-size: 12px; min-width: 26px; text-align: center; padding: 3px 6px; border-radius: 6px;
    cursor: pointer; background: var(--card-bg, #f0f0f0); border: 1px solid var(--border); color: var(--text);
}
.cal-day:hover { background: var(--link); color: #fff; border-color: var(--link); }
.cal-day sup { font-size: 8px; color: var(--soft); margin-left: 1px; }
.cal-day:hover sup { color: #e0e0e0; }

/* ── Search (collapsed into icon, main) ── */
/* Юзер-фидбек 2026-07-17: поиск раньше был 2 постоянно открытые строки (поле+подсказка+фильтр
   экспресс) — свёрнут в 🔍-кнопку рядом с 📅, тем же паттерном выпадашки. */
.hdr-icons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.search-bar { position: relative; flex-shrink: 0; }
.search-panel {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    width: 320px; max-width: 80vw; text-align: left;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.search-panel.open { display: block; }
.search-panel .search-row { max-width: none; margin-bottom: 8px; }
.search-panel .search-hint { margin-bottom: 8px; }
.search-panel .express-filter { max-width: none; margin: 0; }
/* В RTL .hdr-icons едет к левому краю строки (флекс мирится сам) — правый анкер (right:0)
   уносит 320px-панель за левый край экрана. Левый анкер держит её на видимой части страницы. */
html[dir="rtl"] .calendar-panel, html[dir="rtl"] .search-panel { right: auto; left: 0; }

/* ── Category filter chips (main) ── */
/* Раньше — крупные плашки-пилюли (border+background каждая), занимали 2-3 строки. Теперь — плоский
   текстовый список через « · », как «Связанные X» на тегах/законах: видно, что это разделы, но
   не так ярко, и в 1-2 строки помещается гораздо больше пунктов. */
/* max-width 868→680 + margin auto→0 (юзер-фидбек 2026-07-16: "список разделов... название
   вправо залезает") — .top-bar теперь тоже 680px и слева, а не по центру (та же правка,
   что для статьи, 2026-07-15); список категорий центрировался в старой 868px-раскладке и
   после сужения шапки стал визуально шире и левее её. Единое левое выравнивание на всю
   колонку страницы. */
.category-bar {
    max-width: 680px; margin: 8px 0 0; display: flex; flex-wrap: wrap;
    justify-content: flex-start; font-size: 11.5px; line-height: 1.9;
}
.category-bar.collapsed { max-height: 3.9em; overflow: hidden; }
.category-bar-more {
    display: none; max-width: 680px; margin: 2px 0 0; padding: 0;
    background: none; border: none; color: var(--soft); font-size: 11px; cursor: pointer;
}
.category-bar-more:hover { color: var(--link); }
.express-filter {
    display: flex; align-items: center; gap: 5px; max-width: 680px; margin: 6px 0 0;
    font-size: 12px; color: var(--soft); cursor: pointer; user-select: none;
}
.express-filter input { cursor: pointer; }
.cat-chip {
    cursor: pointer; color: var(--muted); padding: 0 9px; user-select: none;
    border-radius: 999px; transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    border-right: 1px solid var(--border);
}
.cat-chip:last-child { border-right: none; }
/* hover — тихий нейтральный фон + текст темнее (НЕ акцент-цвет), чтобы «наведён» не путался с «выбран» */
.cat-chip:hover { color: var(--text); background: var(--tag-bg); border-right-color: transparent; }
/* active — залитая пилюля циановым тинтом + циан-текст + жирность + тонкое кольцо; читается и без наведения */
.cat-chip.active {
    color: var(--link); font-weight: 600; border-right-color: transparent;
    background: rgba(46,138,160,0.14);
    background: color-mix(in srgb, var(--cyan) 16%, transparent);
    box-shadow: inset 0 0 0 1px rgba(46,138,160,0.32);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 34%, transparent);
}
.cat-chip.active:hover { background: color-mix(in srgb, var(--cyan) 22%, transparent); }
/* RTL: разделитель у арабской раскладки слева — гасим его же на подсвеченном чипе */
html[lang="ar"] .cat-chip:hover, html[lang="ar"] .cat-chip.active { border-left-color: transparent; }
.cat-chip-n { font-size: 9.5px; color: var(--soft); margin-left: 2px; }
.cat-chip.active .cat-chip-n { color: var(--link); opacity: 0.75; }

/* ── Законы: облако имён (как теги) + страница-карточка + связи ── */
.law-item .law-type-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
/* тип-бейдж (на странице закона рядом с заголовком) */
.law-type {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px;
    border-radius: 10px; background: var(--card-bg); border: 1px solid var(--border); color: var(--soft);
    margin-left: 8px; vertical-align: middle;
}
.law-formulas { margin: 14px 0; }
.law-formulas .formula-meaning { font-size: 13px; color: var(--soft); margin-top: 4px; }
/* секция «Законы» на странице тега + чипы-ссылки на страницы законов */
.tag-laws { margin-top: 12px; font-size: 12px; color: var(--soft); }
.tag-laws strong { color: var(--soft); font-weight: 600; margin-right: 4px; }
.law-chip {
    font-size: 12px; color: var(--muted); text-decoration: none;
}
.law-chip:hover { color: var(--link); text-decoration: underline; }
/* Тихий счётчик (юзер-фидбек 2026-07-21): "Статей" дублирует счётчик в .tag-stats выше —
   мельче/тише, без визуального веса заголовка, остаётся якорем #article-list. */
.section-title { margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--soft); }
/* Плавный скролл по якорям + отступ под sticky-шапку, чтобы цель не пряталась под ней. */
html { scroll-behavior: smooth; }
.section-title { scroll-margin-top: 56px; }
/* «N статей» на карточке тега/закона/автора — кликабельно, скроллит к списку статей. */
.stat-jump { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--soft); cursor: pointer; }
.stat-jump:hover { color: var(--link); border-bottom-color: var(--link); }

/* ── Languages ────────────────── */
/* На главной язык-бар делит строку с иконками поиска (🔍) и календаря (📅, .hdr-icons) —
   обе редко нужны сами по себе, едут вправо, не занимают отдельные заметные строки. */
/* max-width СОВПАДАЕТ с .category-bar/.search-row ниже — без него space-between растягивал
   .hdr-icons (🔍/📅) на всю ширину body (900px), а не в рамках читаемой колонки (680px), из-за
   чего иконки визуально "улетали" далеко вправо от остального контента главной (юзер-фидбек
   2026-07-19: "иконки поиска и календаря улетели вправо"). */
.langs-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; max-width: 680px; }
.langs { display: flex; flex-wrap: wrap; }
.langs a {
    font-size: 10px; color: var(--soft); text-decoration: none;
    padding: 0 4px; border-right: 1px solid var(--border);
}
.langs a:last-child { border-right: none; }
.langs a.active { font-weight: 700; color: var(--muted); }

/* ── Search ───────────────────── */
/* max-width 680px — юзер-фидбек 2026-07-16: "поле поиска очень длинное", раньше тянулось
   во всю ширину body (868px) без ограничения, теперь совпадает с шапкой/категориями. */
.search-row { max-width: 680px; margin-bottom: 8px; display: flex; gap: 6px; }
.search-row input {
    flex: 1; min-width: 0; padding: 8px 14px; font-size: 14px; font-family: inherit;
    border: 1px solid var(--border); border-radius: 4px; background: #fafafa; color: var(--text);
}
.search-row input::placeholder { color: #bbb; }
.search-clear {
    flex-shrink: 0; border: 1px solid var(--border); border-radius: 4px;
    background: #fafafa; color: var(--soft); cursor: pointer; padding: 0 12px; font-size: 14px;
}
.search-clear:hover { background: #eee; color: var(--text); }
.search-hint { font-size: 10px; color: var(--soft); margin-bottom: 10px; }

/* ── Filters ──────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; min-height: 18px; }
.filter-tag, .filter-author, .filter-scientist {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; padding: 3px 10px; border-radius: 20px;
}
.filter-tag { background: var(--filter-tag-bg); color: var(--link); }
.filter-author { background: var(--filter-author-bg); color: var(--author-color); }
.filter-scientist { background: var(--filter-scientist-bg); color: var(--scientist-color); }
.filter-tag .remove, .filter-author .remove, .filter-scientist .remove { cursor: pointer; opacity: 0.5; font-size: 13px; }
.filter-tag .remove:hover, .filter-author .remove:hover, .filter-scientist .remove:hover { opacity: 1; }

/* ── Title ────────────────────── */
/* Заголовок теперь первый элемент в шапке статьи (выше списка авторов) — раньше был
   погребён под authors/meta/«я автор», сейчас первым бросается в глаза. */
h1 {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
    font-size: 27px; color: var(--text); line-height: 1.3; margin-bottom: 8px;
}
/* Чуть меньше (юзер-фидбек 2026-07-15: "чуть меньше шрифт заголовка статьи"). */
.article-title-top { max-width: 620px; margin-top: 2px; font-size: 24px; }

/* ── Authors top ──────────────── */
/* max-height+overflow — не display:none, весь текст остаётся в HTML и индексируется
   поисковиком как обычно; ограничение чисто визуальное (для коллабораций на сотни авторов). */
.authors-top { font-size: 12px; line-height: 1.5; color: var(--soft); margin-bottom: 4px;
    max-width: 620px; max-height: 4.5em; overflow-y: auto; }

/* ── Meta ─────────────────────── */
.meta { font-size: 13px; color: var(--soft); margin-bottom: 10px; }
.meta a { color: var(--link); text-decoration: none; }
.cat-badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 2px;
  background: var(--card-bg, #f0f0f0); border: 1px solid var(--border, #ddd); color: var(--soft);
  margin-left: 2px; cursor: pointer; white-space: nowrap; text-decoration: none; }
a.cat-badge:hover { color: var(--link); border-color: var(--link); }
/* ── Разделы arXiv: облако чипов + описание на странице раздела ── */
/* Табличный вид разделов (юзер-фидбек 2026-07-21): имя · код arXiv · число статей,
   сортировка по числу статей ↓ (уже в generate_sections_cloud). Код-колонка отличает
   math.MP от math-ph визуально, хотя оба показывают одно каноничное имя "Math Physics". */
.sections-table { width: 100%; max-width: 680px; margin: 8px 0 30px; border-collapse: collapse; font-size: 14px; }
.sections-table th {
    text-align: left; font-size: 12px; font-weight: 600; color: var(--soft);
    padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.sections-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.sections-table tr:hover td { background: var(--tag-bg); }
.sections-table a { color: var(--text); text-decoration: none; }
.sections-table a:hover { color: var(--link); }
.section-code { font-size: 12px; color: var(--soft); font-family: monospace; }
.section-count { font-size: 13px; color: var(--soft); text-align: right; }
.section-desc { max-width: 620px; margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
/* ── Treemap (карта-мозаика) — дефолтный вид облака тегов/законов (js/treemap.js) ── */
#treemap { position: relative; max-width: 900px; margin: 0 auto 24px; }
.tm-bar { min-height: 24px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.tm-back { background: var(--tag-bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 13px; color: var(--text); }
.tm-back:hover { border-color: var(--link); color: var(--link); }
.tm-crumb { font-size: 14px; font-weight: 600; color: var(--text); }
.tm-stage { position: relative; width: 100%; }
.tm-tile { position: absolute; border: none; border-radius: 6px; overflow: hidden; cursor: pointer; text-align: left; display: flex; align-items: flex-start; text-decoration: none; transition: filter .12s; }
.tm-tile:hover { filter: brightness(1.09); }
.tm-label { font-weight: 500; line-height: 1.15; word-break: break-word; }
.tm-n { font-weight: 400; opacity: .82; }
/* ── Структурный аккордеон (js/treeview.js) — ДЕФОЛТНЫЙ вид облака тегов/законов ── */
#treeview { max-width: 680px; margin: 0 auto 24px; }
.tv-group { border-bottom: 1px solid var(--border); }
.tv-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
    cursor: pointer; padding: 12px 4px; font-size: 15px; color: var(--text); text-align: start; font-family: inherit; }
.tv-head:hover { color: var(--link); }
.tv-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.tv-label { font-weight: 500; flex: 1; }
.tv-count { font-size: 12px; color: var(--soft); }
.tv-chev { font-size: 11px; color: var(--soft); transition: transform .15s; }
.tv-group.open .tv-chev { transform: rotate(90deg); }
.tv-body { display: none; padding: 0 0 10px 22px; column-width: 220px; column-gap: 18px; }
.tv-group.open .tv-body { display: block; }
.tv-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 5px 8px; text-decoration: none; color: var(--text); border-radius: 6px; font-size: 14px;
    break-inside: avoid; }
.tv-item:hover { background: var(--tag-bg); color: var(--link); }
.tv-n { font-weight: 400; color: var(--soft); font-size: 12px; }
.original-title { font-size: 13px; color: var(--soft); margin-bottom: 16px; font-style: italic; }
/* "Original" переехал под заголовок, до авторов (юзер-фидбек 2026-07-15: "строку original
   перенести под название статьи до авторов") — тот же .original-title текст-стиль (курсив,
   приглушённый), просто max-width как у h1/authors-top + меньше отступа под новую позицию. */
.original-title-top { max-width: 620px; margin-bottom: 6px; }
.oneliner { font-size: 15px; color: var(--muted); margin-bottom: 22px; line-height: 1.6; }
/* «Аннотация» — лид из авторского arXiv-abstract; лёгкий фон только цветом, без рамок/линий */
.abstract-lead { margin: 14px 0 18px; padding: 12px 16px; max-width: 620px; background: rgba(74,106,146,0.06); border-radius: 10px; }
.abstract-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--soft); margin-bottom: 5px; }
.abstract-lead p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); }
/* Врезка внутри сплошного текста статьи — акцент/любопытный факт, оживляет монолит */
.callout { margin: 16px 0; padding: 12px 16px; max-width: 620px; background: rgba(74,106,146,0.07); border-radius: 10px;
    font-size: 15.5px; line-height: 1.6; color: var(--text); }
.callout::before { content: "💡"; margin-right: 8px; }

/* ── Article wrapper ──────────── */
/* sticky (не fixed!) — важно: sticky остаётся ВНУТРИ flex-раскладки, поэтому .article-main
   корректно сужается на её ширину. fixed выпадает из потока → текст наезжает на сайдбар,
   а сам сайдбар «залипает» у самого верха вместо того чтобы начинаться на уровне заголовка. */
.article-wrapper { display: flex; gap: 20px; align-items: flex-start; }
/* Рамка убрана (юзер-фидбек 2026-07-15) — держалась ещё с серого холста вокруг белой
   карточки, который откатили раньше; теперь фон и так белый, отдельный контур не нужен. */
/* padding-left:0 — юзер-фидбек 2026-07-15: "выровнять по левому краю названия статьи,
   сейчас идёт отступ начиная с Original" (H1 живёт прямо в body с его паддингом 16px, а тут
   было ЕЩЁ +clamp(16..40px) сверху — текст стартовал на 16-40px правее заголовка). */
/* max-width:680px — та же ширина, что у шапки/текста (юзер-фидбек 2026-07-15: "правую колонку
   надо прижать к статье"). Без этой границы .article-main тянулся flex:1 на всю ширину
   .article-wrapper (~868px), текст внутри упирался в свои 620px и заканчивался на 250px раньше
   границы блока — правая колонка (посаженная по краю БЛОКА) визуально "уезжала" от текста. */
.article-main {
    flex: 1 1 0; min-width: 0; max-width: 680px;
    background: var(--bg);
    padding: 24px clamp(16px, 4vw, 40px) 24px 0;
}
/* Серый холст вокруг белой карточки статьи откачен (юзер-фидбек 2026-07-15: "сделай на
   статьях просто белый фон, убери серый" — серый оставляем только для обучающих статей). */
/* 750px-эксперимент откачен (юзер-фидбек 2026-07-15, тот же день: "верни обратно, ширина
   для глаз была хорошей") — колонка стоит как и раньше на 620px ниже, ничего не переопределяем. */
/* Весь контент статьи держим в ширину обложки (620px) — иначе заголовки/секции/формулы
   растягиваются на всю ширину .article-main и торчат правее картинки, неровно. */
.article-main > * { max-width: 620px; }
/* Формулы — исключение: длинная запись (несколько дробей подряд) не влезает в 620px и
   упирается в overflow-x:auto (горизонтальный скролл). Даём им всю ширину .article-main —
   так меньше формул реально скроллятся, а совсем гигантские всё равно проскроллятся мягко. */
.article-main > .formula { max-width: none; }
/* Ни фона, ни рамки — юзер-фидбек 2026-07-15, тот же день: после "окантовку потолще"
   передумали и попросили "убрать рамку вокруг колонки тегов и прочим" совсем; плашки
   внутри (.side-tag/.side-law/.side-sci) сами уже с контуром, колонке своя рамка не нужна. */
.article-side {
    width: 160px; flex-shrink: 0; position: sticky; top: 64px;
    max-height: calc(100vh - 84px); overflow-y: auto;
    background: none; border: none; padding: 10px 8px;
}
/* На широком экране — по-настоящему закреплённая колонка (как .article-nav слева),
   а не sticky внутри flex: sticky отвязывается от верха, как только заканчивается
   короткая статья (.article-side короче .article-main), и дальше едет вместе со страницей.
   fixed игнорирует высоту соседа — держится у самого верха весь скролл. Текст не наезжает,
   т.к. .article-main > * и так упирается в свои 620px, независимо от того, сколько места
   реально отдано .article-main во flex-раскладке.
   Ширина (160) и отступ (170) СОВПАДАЮТ с .article-nav слева — иначе левая и правая колонки
   разной "тяжести", и вся связка (nav+контент+side) визуально уезжает в сторону нава, а не
   стоит по центру экрана как единое целое (юзер-фидбек 2026-07-15). */
/* Формула right пересчитана под .article-main max-width:680px (юзер-фидбек 2026-07-15:
   "правую колонку надо прижать к статье справа на том же расстоянии что и слева колонка").
   Старая (100vw-900px)/2 - 170px мерила отступ от края 900px-body — годилась, пока текст
   реально тянулся почти во всю его ширину; теперь текст только 680px, поэтому симметрия
   считается от НОВОГО правого края текста: bodyLeftGap(100vw-900px)/2 + паддинг body(16px)
   + ширина статьи(680px) + такой же зазор, как у .article-nav слева (18px) + ширина
   колонки(160px) → right = 100vw − [(100vw-900px)/2 + 16+680+18+160] = (100vw − 832px)/2. */
@media (min-width: 1280px) {
    .article-side {
        /* top/max-height СОВПАДАЮТ с .article-nav — синхронизируются живьём через
           --article-side-top (см. templates/article.html), 245px — фолбэк без JS/до первого
           замера. Раньше был захардкожен на 245px, но реальная высота шапки над H1 гуляет от
           статьи к статье (юзер-фидбек 2026-07-19: "прыгает вниз... не вровень"). */
        position: fixed; top: var(--article-side-top, 245px);
        right: max(12px, calc((100vw - 832px) / 2));
        max-height: calc(100vh - var(--article-side-top, 245px) - 20px);
    }
    html[lang="ar"] .article-side, html[lang="he"] .article-side,
    html[lang="fa"] .article-side, html[lang="ur"] .article-side {
        right: auto; left: max(12px, calc((100vw - 832px) / 2));
    }
}
/* Тот же язык, что у .express-badge — контур, капс, разрядка букв — просто мельче под узкую колонку. */
/* Окаймление плашек — жирнее и контрастнее, фон по-прежнему прозрачный (юзер-фидбек
   2026-07-15: "жирнее окаймление... убери фон совсем контраст добавь"). */
.article-side .side-tag {
    display: block; font-size: 9px; font-weight: 600; color: var(--muted);
    background: transparent; border: 1.5px solid var(--muted); text-decoration: none;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 3px 6px; margin-bottom: 3px; border-radius: 3px;
    text-align: center; transition: all 0.15s;
}
.article-side .side-tag:hover { background: transparent; border-color: var(--link); color: var(--link); }
.article-side .side-tags-label, .article-side .side-laws-label, .article-side .side-sci-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--soft); margin: 10px 0 4px; text-align: center; }
.article-side > *:first-child { margin-top: 0; }
.article-side .side-law {
    display: block; font-size: 9px; font-weight: 600; color: #4a6a92; text-align: center;
    background: transparent; border: 1.5px solid rgba(74,106,146,0.75);
    text-decoration: none; text-transform: uppercase; letter-spacing: .3px;
    padding: 3px 6px; margin-bottom: 3px; border-radius: 3px; transition: all 0.15s;
}
.article-side .side-law:hover { background: transparent; border-color: var(--link); color: var(--link); }
/* Учёные — сверху тегов/законов в той же колонке, зелёный тон как на графе знаний (SCI_COLOR). */
.article-side .side-sci {
    display: block; font-size: 9px; font-weight: 600; color: #2e7d32; text-align: center;
    background: transparent; border: 1.5px solid rgba(46,125,50,0.75);
    text-decoration: none; text-transform: uppercase; letter-spacing: .3px;
    padding: 3px 6px; margin-bottom: 3px; border-radius: 3px; transition: all 0.15s;
}
.article-side .side-sci:hover { background: transparent; border-color: #2e7d32; color: #2e7d32; }

/* ── Section navigation ───────── */
.article-nav {
    position: fixed;
    left: max(12px, calc((100vw - 900px) / 2 - 170px));
    top: var(--article-side-top, 245px);
    width: 160px;
    max-height: calc(100vh - var(--article-side-top, 245px) - 20px);
    overflow-y: auto;
    display: none;
    font-size: 13px;
}
.article-nav ul { list-style: none; margin-top: 0; }
.article-nav li { margin-bottom: 2px; }
.article-nav a {
    display: block; padding: 4px 10px; color: var(--soft);
    text-decoration: none; border-radius: 4px; transition: all 0.15s;
}
.article-nav a:hover, .article-nav a.active { background: #f0f4f8; color: var(--link); }
.article-nav-sep { height: 1px; background: var(--border); margin: 6px 10px 8px; list-style: none; }

/* Nav only fits in the left margin once the viewport is wide enough
   to fit the 900px content column plus the 160px nav without overlap */
@media (min-width: 1280px) {
    .article-nav { display: block; }
}
/* ── Sections ─────────────────── */
section { margin-bottom: 20px; }
section h2 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

/* ── Mosaic ───────────────────── */
.mosaic { position: relative; margin-bottom: 20px; }
/* ── Галерея статьи (js/gallery.js): главное изображение + лента превью снизу ── */
.gallery { max-width: 620px; margin: 0; }
.gallery-stage {
    position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden;
    background: var(--tag-bg);
}
.gallery-main { display: block; width: 100%; height: 100%; cursor: zoom-in; }
/* contain, а не cover — научные рисунки нельзя обрезать; поля заполняет фон .gallery-stage. */
.gallery-main-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-caption {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 8px 12px; font-size: 12px; line-height: 1.4; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.82)); pointer-events: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border); background: rgba(255,255,255,0.92); color: #222;
    cursor: pointer; font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.gallery-nav:hover { background: #fff; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
html[data-theme="dark"] .gallery-nav { background: rgba(30,32,34,0.92); color: #eee; }
.gallery-thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
    flex: 0 0 auto; width: 66px; height: 44px; padding: 0; border-radius: 6px; overflow: hidden;
    border: 2px solid transparent; background: none; cursor: pointer; line-height: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.7; transition: opacity .15s; }
.gallery-thumb:hover img { opacity: 1; }
.gallery-thumb.is-active { border-color: var(--link); }
.gallery-thumb.is-active img { opacity: 1; }

/* ── Lightbox (картинки статьи открываются на месте, не в новой вкладке) ── */
/* [hidden] должен реально прятать — иначе .lightbox{display:flex} ниже (тот же вес
   специфичности, но авторский стиль) перебивает встроенное [hidden]{display:none} браузера,
   и close() выставляет hidden=true, а оверлей остаётся на экране как ни в чём не бывало. */
.lightbox[hidden] { display: none; }
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.9); padding: 40px;
}
.lightbox-frame { margin: 0; max-width: min(90vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 4px; }
.lightbox-caption {
    color: #f0f0f0; font-size: 14px; line-height: 1.5; text-align: center;
    margin-top: 12px; max-width: 100%;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute; border: none; background: rgba(255,255,255,0.12); color: #fff;
    cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.24); }
.lightbox-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 24px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 26px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
@media (max-width: 640px) {
    .lightbox { padding: 16px; }
    .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
    .lightbox-prev { left: 4px; }
    .lightbox-next { right: 4px; }
}

/* ── Text ─────────────────────── */
p { margin-bottom: 16px; color: var(--text); text-align: left; }

/* ── Actions ──────────────────── */
.actions { display: flex; gap: 10px; margin: 20px 0; font-size: 13px; }
.actions button {
    background: none; border: 1px solid var(--border);
    padding: 4px 12px; font-size: 13px; color: var(--soft);
    cursor: pointer; font-family: inherit; border-radius: 4px; transition: all 0.15s;
}
.actions button:hover { border-color: #ccc; color: var(--muted); }
.actions button.liked { color: var(--red); border-color: #fcc; }

/* ── License ──────────────────── */
.license { font-size: 12px; color: var(--soft); margin-top: 16px; max-width: 620px; }
.license a { color: var(--soft); }

/* ── Author verify (без плашки, без подчёркивания/эмодзи — тихая ссылка) ── */
.author-verify-btn {
    background: none; border: none; padding: 0; font-size: 12px; cursor: pointer;
    color: var(--soft); text-decoration: none;
}
.author-verify-btn:hover { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 2000; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff; border-radius: 12px; padding: 24px; max-width: 400px;
    position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.modal-box h3 { font-size: 17px; margin-bottom: 10px; padding-right: 20px; }
.modal-box p { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.modal-close {
    position: absolute; top: 8px; right: 10px; background: none; border: none;
    font-size: 22px; line-height: 1; cursor: pointer; color: var(--soft);
}
.modal-close:hover { color: var(--text); }

/* ── Next article ─────────────── */
/* Низ страницы — та же компактная пилюля справа, что и вверху (юзер-фидбек 2026-07-15:
   "рамка... должна быть такая же как и вверху... чтоб на вторую строку не заходило") —
   .next-btn-top на кнопке снизу переиспользует всю стилистику один в один. */
.next-divider { display: flex; justify-content: flex-end; margin: 20px 0; max-width: 620px; }

/* Дубль кнопки «следующая статья» вверху страницы — на случай если не долистали
   до низа (та же .next-btn, JS обновляет оба разом); компактная пилюля справа. */
.next-top { display: flex; justify-content: flex-end; max-width: 620px; margin: 0 0 10px; }
.next-btn-top {
    display: block; width: auto; max-width: 100%; padding: 4px 10px; font-size: 11px;
    font-family: inherit; background: none;
    border: 1px solid var(--border); border-radius: 0;
    color: var(--soft); cursor: pointer; text-align: center; transition: all 0.15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.next-btn-top:hover { background: var(--tag-bg); border-color: var(--link); color: var(--link); }
.next-btn-top:disabled { opacity: 0.5; cursor: default; }

/* ── Article card (list) ──────── */
/* Картинка — маленькая врезка (float), текст ОБТЕКАЕТ её сверху (заголовок/лейбл рядом
   с картинкой), а как только картинка кончается — текст возвращается на всю ширину
   карточки. Раньше картинка держала свою колонку на всю высоту (flex row) — отъедала
   много места и мало оставляла тексту. clearfix на .article-card — иначе высота
   родителя схлопывается вокруг float-only контента и разделитель между карточками
   наезжает на картинку. */
/* Без разделительной линии и с меньшим отступом — плотнее (юзер-фидбек 2026-07-15):
   карточки отличает уже сам блок (заголовок+картинка), линия была лишней. */
.article-card { padding: 0; margin-bottom: 16px; }
.article-card::after { content: ""; display: table; clear: both; }
.article-card:last-child { margin-bottom: 0; }
.card-date { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.card-img-wrap { float: left; width: 130px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--border); display: block; margin: 2px 16px 8px 0; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.article-card:hover .card-img-wrap img { transform: scale(1.03); }
.card-body { display: block; }
/* Мета-строка «eyebrow» над картинкой (js/search.js) — полная ширина, чтобы плавающая
   мини-картинка встала под ней вровень с заголовком. */
.card-eyebrow { margin-bottom: 5px; line-height: 1.3; }
.card-cat { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--link); text-decoration: none; }
.card-date { display: inline-block; font-size: 11px; margin-left: 8px; }
/* RTL: .card-cat/.card-date идут без пробела в разметке (js/search.js), зазор — только через
   margin-left, который в RTL не переворачивается сам собой — дата и раздел визуально слипались
   (юзер-фидбек 2026-07-21). */
html[dir="rtl"] .card-date { margin-left: 0; margin-right: 8px; }
/* Заголовок карточки — одна строка на любой ширине, обрезка многоточием, а не перенос
   (юзер-фидбек 2026-07-21). НЕ трогаем .card-desc тем же способом — overflow:hidden там
   уже один раз ломал обтекание плавающей картинки (.card-img-wrap { float:left }), см.
   комментарий у .card-desc; заголовок короче и начинается у верхнего края картинки, риск
   ниже, но проверь живьём на десктопной ширине при следующей правке этого блока. */
.card-title {
    display: block; font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; font-weight: 600;
    line-height: 1.3; color: var(--text); text-decoration: none; margin-bottom: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.article-card:hover .card-title { color: var(--link); }
/* Обрезка длины — ТЕКСТОМ в JS (cardHTML), не CSS line-clamp/max-height: и -webkit-box,
   и overflow:hidden создают новый Block Formatting Context — такой блок обтекает float
   ЦЕЛИКОМ прямоугольником (даже строки НИЖЕ картинки почему-то поджимались), а не построчно.
   Обычный блок без overflow построчно уважает float. */
.card-desc { font-size: 13px; line-height: 1.55; color: var(--soft); margin-bottom: 7px; }
.card-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.card-meta a { color: var(--muted); text-decoration: none; }
.card-meta a:hover { color: var(--link); }
.card-meta .sep, .card-tags .sep { margin: 0 5px; opacity: .45; }
.card-tags { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; }
.card-tags a { color: var(--muted); text-decoration: none; }
.card-tags a:hover { color: var(--link); }
/* clear:both — реакции всегда под картинкой, даже если текста было мало и он не дотянул
   до её нижнего края (иначе кнопки продолжали бы жаться в узкой колонке рядом с картинкой). */
.card-actions { clear: both; }
@media (max-width: 700px) {
  .card-img-wrap { float: none; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 12px; }
  .card-title { font-size: 18px; }
}

/* ── Engagement: реакции / избранное / обратная связь / рефайн ── */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 620px; margin: 16px 0; }
.reactions { display: flex; gap: 6px; }
.react-btn, .fav-btn { cursor: pointer; background: var(--card, transparent); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 14px; color: var(--fg, inherit); }
.react-btn .rc { opacity: .7; font-size: 12px; margin-left: 2px; }
.react-btn.active { border-color: var(--accent, #4a90d9); background: rgba(74,144,217,.14); }
.fav-btn.active { border-color: #e0a800; background: rgba(224,168,0,.14); }
.refine-raw { margin: 12px 0; padding: 12px 16px; background: rgba(184,134,11,.10); border-left: 3px solid #b8860b; border-radius: 4px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
/* Рамку убрали (юзер-фидбек 2026-07-15) — виджет читается как часть колонки, не отдельная
   карточка; чипы — в одну строку с горизонтальным скроллом (умещаются любые 6 формулировок
   без переноса), тот же приём, что у .mosaic-track. */
.feedback { margin: 14px 0; padding: 0; max-width: 620px; }
/* "Следующая статья" сидит на той же строке, что заголовок отклика (юзер-фидбек 2026-07-15:
   "следующая статья поставить надо с отзывами, как раз на строку в которой было написано
   как читается") — .next-btn-top тут уже компактная однострочная пилюля, влезает без переноса. */
.feedback .fb-title-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.feedback .fb-title-row .next-btn-top { flex-shrink: 0; }
.feedback .fb-title { font-size: 13px; color: var(--muted, #888); }
.feedback .fb-chips {
    display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 8px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.feedback .fb-chips::-webkit-scrollbar { display: none; }
.feedback .fb-chip { flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-size: 12px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; user-select: none; }
.feedback .fb-chip.active { background: var(--accent, #4a90d9); color: #fff; border-color: var(--accent, #4a90d9); }
.feedback .fb-comment-toggle { background: none; border: none; color: var(--accent, #4a90d9); cursor: pointer; font-size: 12px; padding: 0 0 8px; }
/* Всё содержимое отзыва (чипы + коммент + отправка) свёрнуто в .fb-expand,
   раскрывается кнопкой «+ комментарий» (юзер-фидбек 2026-07-21). */
.feedback .fb-expand[hidden] { display: none; }
.feedback .fb-expand { margin-top: 2px; }
.feedback .fb-comment-toggle.open { color: var(--muted, #888); }
.feedback .fb-comment { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; background: var(--bg, transparent); color: var(--fg, inherit); }
/* Скрыт по умолчанию — нужен только для комментария, чипы шлются сами по клику
   (юзер-фидбек 2026-07-15: "кнопка отправить только для комментария, появляется после +").
   js/likes.js снимает [hidden] при открытии textarea. */
.feedback .fb-row[hidden] { display: none; }
.feedback .fb-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.feedback .fb-send { cursor: pointer; background: var(--accent, #4a90d9); color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 13px; }
.feedback .fb-status { font-size: 12px; color: var(--muted, #888); }
/* margin-top: auto — прижимает реакции к низу карточки (заполняет пустоту под коротким
   описанием, если картинка слева выше текста) вместо того чтобы висеть сразу под текстом. */
.card-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.card-actions .react-btn.sm, .card-actions .fav-btn.sm { padding: 3px 7px; font-size: 13px; line-height: 1; }
.card-content { flex: 1; min-width: 0; }
.card-content h3 { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.card-content h3 a { color: var(--text); text-decoration: none; }
.card-content h3 a:hover { color: var(--link); }
.card-content .oneliner { font-size: 13px; color: var(--muted); margin-bottom: 4px; line-height: 1.5; }
/* «мини»-режим ленты: полный threads-текст как самодостаточный анонс */
.card-content .oneliner.card-mini { font-size: 14px; color: var(--text); line-height: 1.6; margin: 4px 0 8px;
    padding-left: 10px; border-left: 2px solid var(--link); white-space: pre-line; }
.card-content .meta { font-size: 12px; color: var(--soft); }
.card-cats { margin-top: 3px; }
.card-cats .cat-badge { cursor: pointer; transition: background 0.15s; }
.card-cats .cat-badge:hover { background: var(--link); color: #fff; border-color: var(--link); }
.card-tags { margin-top: 4px; }
.card-tags a { font-size: 11px; color: var(--soft); text-decoration: none; }
.card-tags a:hover { color: var(--link); }
.card-scientists { margin-top: 3px; font-size: 11px; }
.card-scientists a { font-size: 11px; }
/* Авторы карточки — отдельным блоком, переносится на несколько строк */
.card-authors { margin-top: 3px; font-size: 12px; color: var(--soft); line-height: 1.55; }
.card-authors .sep { margin: 0 5px; opacity: .45; }
.card-authors a { color: var(--soft); text-decoration: none; }
.card-authors a:hover { color: var(--link); }
.card-authors .au-more-lite { color: var(--muted); }
.card-authors .text-author-link { color: var(--soft); text-decoration: none; }
.card-authors .text-author-link:hover { color: var(--link); }
.card-authors .au-more { color: var(--link); cursor: pointer; text-decoration: none; white-space: nowrap; }
.card-authors .au-more:hover { text-decoration: underline; }
/* строка законов в карточке ленты — под тегами, белым по тёмно-синему */
.card-laws { margin-top: 4px; padding-left: 2px; }
.card-laws a {
    display: inline-block; font-size: 11px; color: #4a6a92;
    background: rgba(74,106,146,0.10); border: 0.5px solid rgba(74,106,146,0.28);
    padding: 1px 7px; border-radius: 3px; margin: 2px 4px 0 0; text-decoration: none;
}
.card-laws a:hover { background: rgba(74,106,146,0.20); color: var(--link); }

/* ── Text tags (highlighted) ──── */
.text-tag { color: var(--link); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--link); }
.text-tag:hover { background: #e8f0f8; border-radius: 2px; }
.text-scientist { color: var(--scientist-color); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--scientist-color); }
.text-law { color: var(--law-color); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--law-color); }
.text-law:hover { background: rgba(192,57,43,.08); border-radius: 2px; }
.text-scientist:hover { background: #e8f5e9; border-radius: 2px; }
.text-author-link { color: var(--author-color); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--author-color); }
.text-author-link:hover { background: #f5f0f8; border-radius: 2px; }

/* ── Tooltip ──────────────────── */
.tag-tooltip {
    display: none; position: fixed; z-index: 1000;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 16px; max-width: 320px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1); font-size: 13px; line-height: 1.5;
}
.tag-tooltip strong { color: var(--text); }
.tag-tooltip .tip-desc { color: var(--muted); font-size: 12px; }
.tag-tooltip a { color: var(--link); font-size: 12px; }
.tag-tooltip a { color: var(--link); font-size: 12px; }

/* ── Refine badge / toggle ────── */
.refine-badge { font-size: 14px; color: #b8860b; vertical-align: super; cursor: help; }
.refine-toggle {
    font-size: 16px; padding: 0 8px; border: 1px solid #b8860b; border-radius: 4px;
    background: transparent; color: #b8860b; cursor: pointer; margin-left: 8px;
    vertical-align: middle; line-height: 1.4; transition: all 0.15s;
}
.refine-toggle:hover { background: #b8860b; color: #fff; }

/* ── Express badge — статья по аннотации, без разбора полного текста ── */
.express-badge {
    display: inline-block; font-size: 11px; font-weight: 600; vertical-align: middle;
    padding: 2px 7px; border: 1px solid #c07a1e; border-radius: 3px;
    color: #c07a1e; text-transform: uppercase; letter-spacing: .3px; cursor: help;
}
.card-express-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 5px; margin-left: 6px; border: 1px solid #c07a1e; border-radius: 3px;
    color: #c07a1e; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle;
}

/* ── Formulas (без подложки — тонкие линии-разделители) ── */
.formula {
    margin: 20px 0; padding: 16px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* overflow-x:auto САМ ПО СЕБЕ заставляет браузер резолвить overflow-y:visible в auto (спецификация
   не допускает auto по одной оси + visible по другой — computed-value visible молча заменяется на
   auto), так что явный overflow-y:visible браузер всё равно игнорирует. Высота блока не задана
   (auto), поэтому overflow-y:hidden ничего не обрежет — контейнер и так растягивается под контент
   (высокие формулы: дроби, пределы, матрицы — просто выше). А вот KaTeX иногда даёт scrollHeight на
   1px больше clientHeight (субпиксельное округление, особенно у дробей) — с auto это иногда рисовало
   тонкий вертикальный скроллбар на ровном месте; hidden молча съедает этот 1px, скроллбара нет никогда. */
.formula-render { font-size: 17px; margin-bottom: 6px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
/* .formula сам без max-width (даём формулам расти шире 620px, чтобы реже упирались в скролл —
   см. .article-main > .formula ниже), но meaning — обычный прозаический текст с расшифровкой
   переменных, а не формула. Без переноса длинная строка без пробелов (не расшифрованная LaTeX-
   команда, длинное название и т.п.) раздувала бы .formula вширь и утаскивала за собой соседний
   контент (в т.ч. толкала фиксированный сайдбар тегов) — оборачиваем принудительно. */
.formula-meaning { font-size: 13px; color: var(--muted); overflow-wrap: break-word; word-break: break-word; }
.formula + .formula { margin-top: -1px; border-top: none; }

/* ── Scientists section ───────── */
.scientists-section { margin: 12px 0; font-size: 12px; color: var(--soft); }
.scientists-section a, .scientists-section .text-scientist { color: var(--muted); text-decoration: none; }
.scientists-section a:hover { color: var(--link); text-decoration: underline; }

/* ── Key numbers (без подложки, по ширине текста) ── */
.key-numbers {
    margin: 20px 0; padding: 14px 0; max-width: 620px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.key-numbers h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--soft); text-transform: uppercase; letter-spacing: .03em; }
.key-numbers ul { list-style: none; }
.key-numbers li { font-size: 13px; margin-bottom: 4px; color: var(--muted); }
.key-numbers li strong { color: var(--text); }

/* ── Impact (без подложки, по ширине текста) ── */
.impact {
    margin: 16px 0; padding: 12px 0; max-width: 620px;
    border-top: 1px solid var(--border);
    font-size: 13px; color: var(--muted);
}

/* ── Fun fact (+ sci-fi, единый блок, без подложки, по ширине текста) ── */
.fun-fact {
    margin: 20px 0; padding: 14px 0; max-width: 620px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    font-size: 14px; color: var(--muted);
}
/* Пустые блоки не должны рисовать рамку/просвет (юзер-фидбек 2026-07-21, Блок 4: "две линии
   подряд без текста между ними"). Большинство мест уже строят эти блоки условно в Python
   (пусто → "" совсем без элемента) — здесь просто подстраховка на случай, если где-то
   элемент всё же дойдёт до рендера с пустым содержимым. */
.fun-fact:empty, .section:empty, .related-tags:empty, .desc:empty { display: none; }
.fun-fact .fact { margin: 0; }
.fun-fact .fact + .fact { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.fun-fact .fact-scifi { font-style: italic; }

/* ── Quote (без подложки, по ширине текста) ── */
.quote {
    margin: 16px 0; padding: 12px 0; max-width: 620px;
    border-top: 1px solid var(--border);
    font-size: 14px; color: var(--muted); font-style: italic;
}

/* ── Discoveries list ─────────── */
.discoveries-list { list-style: disc; padding-left: 20px; }
.discoveries-list li { margin-bottom: 6px; font-size: 14px; color: var(--muted); }

/* ── Entity body (тег/закон/учёный/автор: реакции, related, мини-граф, поиск) — та же ширина
   620px, что и шапка. Список статей (#search-results) раньше был вынесен на полную ширину —
   карточкам со старым флекс-макетом (300px-картинка) было тесно; с компактным float-макетом
   (130px) тесноты больше нет, поэтому список тоже сведён к 620px — единая видимая ширина
   везде (текст закона/тега = список статей = текст на странице статьи). */
.entity-body { max-width: 620px; }
/* Правый сайдбар для тега/закона/учёного (эксперимент, юзер-фидбек 2026-07-15: "тот же
   принцип, что для статей... везде один подход") — reuse .article-wrapper/.article-side
   flex-раскладку, но без левого .article-nav (тут нет оглавления), поэтому просто flex row. */
.entity-wrapper { display: flex; gap: 20px; align-items: flex-start; }
.entity-wrapper .entity-body { flex: 1 1 0; min-width: 0; }
#search-results.entity-list { max-width: 620px; }
#search-results.entity-list .card-title { font-size: 18px; }
/* Главная — тот же узкий список (юзер-фидбек 2026-07-15): без отдельной колонки-даты и
   разделительных линий список плотнее, а освободившаяся ширина уходит под перенос описания
   (тот же текст на ~25% уже колонке — оборачивается в больше строк, не обрезается сильнее). */
#search-results:not(.entity-list) { max-width: 620px; }

/* ── Tag header ───────────────── */
.tag-header { position: relative; margin-bottom: 30px; max-width: 620px; }
/* Поиск на карточке тега/закона/учёного/раздела — свёрнут в 🔍 у заголовка (юзер-фидбек
   2026-07-21: "список и так есть, поле поиска лишнее"), тот же паттерн выпадашки, что на
   главной (.search-bar/.search-panel уже стилизованы, initSearchToggle() в search.js
   универсален по id). Иконка — ВПЛОТНУЮ к тексту заголовка (.tag-title-row, тот же приём,
   что .brand-row на главной), а не в углу всего .tag-header — иначе на короткий заголовок
   иконка "уезжала" далеко вправо и выглядела оторванной (юзер-фидбек 2026-07-21). */
.tag-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag-title-row h1 { margin-bottom: 0; }
.tag-header h1 { font-size: 30px; margin-bottom: 10px; }
.scientist-header h1 { font-size: 24px; }
.tag-header .desc { font-size: 15.5px; color: var(--muted); margin-bottom: 14px; line-height: 1.65; }
.tag-header .fact { font-size: 13px; color: var(--soft); margin-bottom: 10px; }
/* ── Мини-уровень (тег/закон): суть за 10 секунд + где применяется на практике ── */
.mini-desc { font-size: 17px; line-height: 1.6; color: var(--text); margin-bottom: 14px; }
.practical-app {
    font-size: 14px; color: var(--muted); line-height: 1.6;
    padding-top: 12px; border-top: 1px solid var(--border);
}
.practical-app strong { color: var(--soft); font-weight: 600; }
.tag-stats { font-size: 13px; color: var(--soft); margin-bottom: 14px; }
/* Плоский список без плашек: подпись + ссылки через « · », мелким шрифтом. */
.related-tags { margin-bottom: 14px; font-size: 12px; line-height: 1.7; }
.related-tags strong { color: var(--soft); font-weight: 600; margin-right: 4px; }
.related-tags a {
    font-size: 12px; color: var(--muted); text-decoration: none;
}
.related-tags a:hover { color: var(--link); text-decoration: underline; }

/* ── Section ──────────────────── */
.section { margin-bottom: 26px; }
.section h2 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }

/* ── Suggestion item ──────────── */
.suggestion-item:hover { background: #f5f8fa; }

/* ── Alphabet nav ─────────────── */
.alphabet-nav {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    padding: 12px 0; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.alphabet-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px; font-size: 14px; font-weight: 600;
    color: var(--link); text-decoration: none; transition: background 0.15s;
}
.alphabet-nav a:hover, .alphabet-nav a.active { background: var(--tag-bg); }
.alphabet-nav a.active { color: var(--text); }
.alphabet-nav .alpha-empty { color: var(--border); cursor: default; }

/* ── Author sections list ─────── */
.author-sections { padding: 10px 0; }
.letter-section { margin-bottom: 24px; }
.letter-heading {
    font-size: 20px; font-weight: 700; color: var(--text);
    border-bottom: 2px solid var(--border); padding-bottom: 6px; margin-bottom: 10px;
    position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.author-list { display: flex; flex-direction: column; gap: 1px; }
.author-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-radius: 4px; text-decoration: none;
    color: var(--text); font-size: 14px; transition: background 0.12s;
}
.author-row:hover { background: var(--tag-bg); }
.author-row .author-count {
    font-size: 12px; color: var(--soft); white-space: nowrap; margin-left: 12px;
}
.author-row .author-tags {
    flex: 1; margin: 0 12px; display: flex; gap: 3px; flex-wrap: wrap;
    max-height: 2.6em; overflow: hidden;
}
.author-row .author-tags span {
    font-size: 10px; padding: 1px 6px; border-radius: 10px; line-height: 1.6;
    background: var(--tag-bg); color: var(--link); white-space: nowrap;
    border-bottom: none;
}
.author-row .author-tags span:hover { background: #d8dde8; }

/* ── Author cloud (главная страница авторов — отдельно от A–Z списка) ── */
.author-cloud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 20px 0; }
.author-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 24px; cursor: pointer;
    transition: all 0.2s; border: 1px solid transparent; color: #6b5b7a;
    font-size: 12px; background: var(--author-bg);
}
.author-item:hover { border-color: #ccc; }
.author-item.selected { background: #f0e8f8; border-color: var(--author-color); color: var(--text); font-weight: 600; }

/* ── Tags/Laws/Scientists cloud → компактные колоночные списки, без плашек ──
   Группировка (раздел или буква) — заголовок-лейбл + плоский список ссылок,
   раскладка колонками через CSS columns (как телефонная книга). */
.tag-cloud, .scientist-cloud {
    column-width: 220px; column-gap: 32px; padding: 20px 0 4px;
}
.cloud-group-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--soft); margin: 18px 0 6px; break-after: avoid-column; break-inside: avoid;
}
.cloud-group-label:first-child { margin-top: 0; }
.tag-item, .scientist-item, .law-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 3px 2px; cursor: pointer; text-decoration: none;
    color: var(--text); font-size: 13.5px; break-inside: avoid;
}
.tag-item:hover, .scientist-item:hover, .law-item:hover { color: var(--link); }
.tag-item.educational { color: var(--soft); font-style: italic; }
.tag-item.educational:hover { color: var(--link); font-style: normal; }
.tag-item .cat-chip-n, .scientist-item .cat-chip-n, .law-item .cat-chip-n { flex-shrink: 0; }

/* ── Selected bar ─────────────── */
.selected-bar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-bottom: 24px; padding: 10px 14px;
    background: #fafafa; border-radius: 8px; min-height: 40px;
}
.selected-bar .chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; padding: 4px 10px; border-radius: 20px;
}
.selected-bar .chip.tag-chip { background: var(--filter-tag-bg); color: var(--link); }
.selected-bar .chip.author-chip { background: var(--filter-author-bg); color: var(--author-color); }
.selected-bar .chip.scientist-chip { background: var(--filter-scientist-bg); color: var(--scientist-color); }
.selected-bar .chip .remove { cursor: pointer; opacity: 0.5; }
.selected-bar .go-btn {
    background: var(--link); color: #fff; font-size: 12px;
    padding: 5px 16px; border-radius: 20px; text-decoration: none; margin-left: auto;
}

/* ── Subtitle ─────────────────── */
.subtitle { font-size: 13px; color: var(--soft); margin-bottom: 20px; }

/* ── Footer ───────────────────── */
footer {
    border-top: 1px solid var(--border); margin-top: 40px;
    padding-top: 14px; font-size: 12px; color: var(--soft); text-align: center;
}
footer a { color: var(--soft); }
/* Значок-ссылка на внутренний дашборд статистики (status.html) — юзер-фидбек 2026-07-17:
   "пристрой ссылку... иконка с цифрой 42" (обыгрывает bridge42worlds). Публичная страница,
   не в .gitignore — просто неприметный значок в подвале, не пункт меню. */
.status-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border);
    font-size: 10px; font-weight: 600; vertical-align: middle; text-decoration: none;
}
.status-badge:hover { border-color: var(--link); color: var(--link); }

/* ── Mobile ───────────────────── */
@media (max-width: 640px) {
    .article-wrapper, .entity-wrapper { flex-direction: column; }
    .article-main, .entity-wrapper .entity-body { width: 100%; max-width: 100%; }
    .article-side {
        width: 100%; position: static;
        display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px;
    }
    .article-side .side-tag { display: inline-block; margin-bottom: 0; }
    .mosaic-track { aspect-ratio: 3 / 1; }
    .mosaic-item { width: calc(33.333% - 2.7px); }
    h1 { font-size: 20px; }
    .article-nav { display: none; }
}
#cograph { border: 0.5px solid var(--border); border-radius: 12px; background: var(--tag-bg); margin: 8px 0 18px; }
#cgcanvas { width: 100%; height: 340px; display: block; touch-action: none; cursor: grab; }

/* ═══ Брендовый слой (редизайн 2026-07) — Проход 1: типографика + плавные переходы ═══
   Аппендим в конец → правила выигрывают по порядку источника, не переписывая файл.
   Компоненты (карточки/нав/чипы) — отдельными шагами. */
body { font-family: var(--sans); background: var(--bg); color: var(--text);
  transition: background-color .45s ease, color .35s ease; }
h1, h2, h3, .card-title, .card-content h3, .tag-header h1, .scientist-header h1,
.kg-h1, .letter-heading, .home-intro h1, .subtitle + h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.011em; }
.logo { font-family: var(--serif); font-weight: 600; }
/* mono-подписи/меты/эйбрау в брендовом ключе */
.card-meta, .tag-stats, .card-eyebrow, .cal-btn, .search-hint, .reading-time { font-family: var(--mono); }

/* ═══ Брендовый слой — Проход 1b: карточка ленты + навигация ═══ */
.article-card { background: var(--card-bg); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 15px 17px; box-shadow: none;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .24s, border-color .3s, background-color .4s ease; }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--hair-soft); }
.card-img-wrap { border-radius: var(--radius-sm); }
.top-bar { border-bottom: 1px solid var(--hair); }
.nav-links a { font-family: var(--mono); font-size: 13px; color: var(--faint); transition: color .18s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }

/* ═══ Брендовый слой — Проход 1c: кнопки/пилюли ═══ */
.react-btn, .fav-btn, .cal-btn, #search-toggle-btn, .search-clear, .author-verify-btn, .refine-toggle {
  border: 1px solid var(--hair); background: var(--surface); color: var(--muted); border-radius: 999px;
  transition: color .16s, border-color .16s, background-color .3s, transform .16s; }
.react-btn:hover, .fav-btn:hover, .cal-btn:hover, #search-toggle-btn:hover, .author-verify-btn:hover, .refine-toggle:hover {
  color: var(--ink); border-color: var(--faint); transform: translateY(-1px); }
.react-btn.active, .fav-btn.active { color: var(--link); border-color: var(--link); }
.law-chip, .fb-chip, .kg-chip, .related-tags a {
  border: 1px solid var(--hair); background: var(--tag-bg); border-radius: 999px; padding: 4px 11px;
  color: var(--muted); text-decoration: none; transition: color .16s, border-color .16s; display: inline-block; }
.law-chip:hover, .fb-chip:hover, .kg-chip:hover, .related-tags a:hover { color: var(--link); border-color: var(--link); }
.fb-chip.active { background: var(--link); color: #fff; border-color: var(--link); }

/* Алиасы для унаследованных var(--accent/--fg/--card) фолбэков → брендовые.
   Чинит синий #4a90d9 у активных реакций, кнопки «отправить», fb-chip.active и пр. */
:root { --accent: var(--cyan); --fg: var(--text); --card: var(--card-bg); }

/* ═══ Брендовый слой — Проход 1d: заголовки-лейблы, футер, мелочи ═══ */
.section-title { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); border: none !important; padding: 0; margin: 32px 0 14px; }
footer { border-top: 1px solid var(--hair); color: var(--faint); font-family: var(--mono); font-size: 12px; }
footer a { color: var(--muted); }
.mini-graph-label { color: var(--faint); font-family: var(--mono); }
.subtitle { color: var(--muted); }
.tag-stats, .stat-jump { color: var(--faint); }
.stat-jump { color: var(--link); }
/* серебристая мягкая рамка у мини-графа + галереи */
.mini-graph, .gallery-main, .archive-calendar { border-radius: var(--radius-sm); }

/* ═══ Брендовый слой — Проход 1e: инлайн SVG-иконки (замена эмодзи) ═══ */
.ico-svg { width: 1.05em; height: 1.05em; vertical-align: -.16em; display: inline-block; }