/* «Рассказ ИИ» древа — карточка для чтения (tree_story.js, разбор текста —
   tree_story_text.js, «Альбомы из рассказа» — tree_story_rail.js). Свой файл,
   тот же слой responsive, что у tree.css.

   Владелец 11.10: рассказ — «стена текста» во всю ширину (1440 px — 123 знака
   в строке). Владелец 13.10: узкая карточка рядом с шапкой во всю страницу —
   «надо выровнять по ширине»: карточка тянется до правого края, как шапка и
   остальные блоки страницы, а свободное место справа занимают альбомы,
   упомянутые в рассказе. Вёрстка для чтения:
   • карточка — во всю ширину страницы (у панели нет своего предела ширины);
     текст — колонка с пределом в знаках (.ts-text, 66ch — 65–75 знаков в
     строке, межстрочный 1.7): строки не растягиваются;
   • ширина колонки чтения и поле карточки — переменные у .ts (--ts-col,
     --ts-pad): по ним стоят колонка, список альбомов под текстом, заголовок
     карточки и «Свернуть рассказ» — на одной левой линии при любой ширине;
   • шапка с ✕ прилипает под шапкой приложения, пока рассказ на экране
     (--ts-stick — как у линейки «Карьер»): закрыть можно с любого места;
   • раздел — заголовок h4 с номером; когда под карточку есть 880 px,
     заголовок стоит в поле слева и едет рядом с текстом раздела. Две колонки
     текста не делаем: раздел выше экрана пришлось бы читать вниз, вверх и
     снова вниз;
   • «Альбомы из рассказа» (.ts-rail) — три раскладки:
     – от 1430 px (окно 1440): поле заголовков | текст | альбомы справа.
       Список едет рядом с текстом (sticky); свёрнутый (не больше 8 строк или
       трёх рядов плиток) стоит в потоке — короткий текст его не обрезает, а
       карточка не выше, чем нужно тексту или свёрнутому списку; выше окна
       список не бывает — тогда он листается внутри себя (полоса видна, низ
       затухает). До 1680 px колонка узкая (от 168 px) — строки «обложка |
       название, год», видно 8; от 1680 px — плитки с обложкой сверху, четыре
       в ряд, видно 12, а один-три альбома — строки с обложкой 96 px;
     – 600–1429 px: справа от текста меньше 160 px — колонка текста стоит по
       центру карточки, альбомы — под текстом, сеткой строк на ширину текста
       (в широкой карточке заголовок списка — в поле слева, как у разделов),
       видно 6;
     – телефон: под текстом лента плиток, которая листается сама; страница
       вбок не листается; лента показывает все альбомы.
     «ещё N» раскрывает остальные (кнопка есть, когда скрыто не меньше трёх).
     Обложка занимает своё место сразу (буква названия под картинкой) —
     приход картинки ничего не двигает;
   • рассказ без ссылок на альбомы (.ts-solo) — колонка текста по центру;
   • список альбомов в тексте — строки «год | название — пояснение» с
     волосяными линиями; в две колонки (.ts-cols) — только списки, где каждый
     пункт помещается в строку колонки (решает разбор), и не на телефоне;
   • альбом древа в тексте — ярче (.ts-cite), с карточкой — подчёркнут
     акцентом (.ts-link).
   Телефон 375 px: ничего шире экрана, поля 16 px, текст 15.5 px.
   Цвет — не единственный признак (ссылка подчёркнута, «устарел» — словом).
   Фокус виден; при reduced-motion — без анимаций. Контейнерных размеров и
   единиц контейнера здесь нет: карточка перерисовывается, а WebKit на них
   сбрасывал прокрутку (tree_careers.css). */
@layer responsive {
/* Карточка — во всю ширину страницы, как шапка древа. Размер шрифта задан здесь, чтобы «ch» у карточки,
   колонки и текста значил одно и то же. */
.tree-panel[data-tree-panel="story"] { padding: 0; font-size: 15px;
    --ts-stick: var(--topbar-h, 64px); --ts-head: 57px; }
.tree-actions { scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); }
/* Шапка телефона и портретного планшета (.m-header, sticky) — 60 px без выреза. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
    .tree-panel[data-tree-panel="story"] { --ts-stick: calc(var(--safe-top, 0px) + 60px); }
    .tree-actions { scroll-margin-top: calc(var(--safe-top, 0px) + 72px); }
}
/* Раскрытый рассказ — кнопка «нажата» (и aria-expanded для диктора). */
.tree-actions .btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text-strong); }

/* --ts-col — ширина колонки чтения, --ts-pad — поле карточки: по ним стоят колонка, список альбомов под
   текстом, заголовок карточки и «Свернуть рассказ». */
.ts { min-width: 0; --ts-col: 66ch; --ts-pad: 24px; }
/* Карточка берёт фокус по щелчку в тексте (tabindex=-1), чтобы Esc её закрывал; в обход Tab не входит. */
.ts:focus { outline: none; }
.ts * { min-width: 0; }
.ts-head { position: sticky; top: var(--ts-stick); z-index: 2; display: flex; align-items: center; gap: 12px;
    min-height: var(--ts-head); padding: 8px 10px 8px var(--ts-pad); background: var(--bg-card);
    border-bottom: 1px solid var(--border-soft); border-radius: var(--radius) var(--radius) 0 0; }
/* Заголовок карточки — над левым краем колонки чтения (она по центру карточки): при малом запасе ширины
   разница в 16 px между ним и текстом читалась как неточное выравнивание. */
.ts:has(.ts-grid) .ts-head { padding-left: max(var(--ts-pad), calc((100% - var(--ts-col)) / 2)); }
.ts-headline { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ts-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.ts-meta { margin: 0; color: var(--text-dim); font-size: 12px; }
.ts-busy { color: var(--accent-text); }
.ts-stale { border-color: var(--accent-dim); color: var(--accent-text); }
.ts-x { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 0; font-size: 14px; }
.ts-body { padding: 0 var(--ts-pad) 6px; }
.ts-body > .tree-panel-msg, .ts-main > .tree-panel-msg { margin: 16px 0 12px; }
.ts-body > .btn { margin: 0 0 14px; }
/* Колонка чтения стоит по центру карточки; «Свернуть рассказ» — под её левым краем. */
.ts-main { max-width: var(--ts-col); margin-inline: auto; }
.ts-foot { box-sizing: border-box; max-width: calc(var(--ts-col) + 2 * var(--ts-pad)); margin-inline: auto;
    padding: 4px var(--ts-pad) 18px; }

/* Ожидание и пометки над текстом. */
.ts-wait { padding: 30px 0 18px; text-align: center; color: var(--text-mid); }
.ts-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 0; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev);
    color: var(--text-mid); font-size: 13px; }
.ts-strip-stale { border-color: var(--accent-line); background: var(--accent-wash); }
.ts-strip .dossier-spin { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; border-width: 2px; }

/* Разделы. */
.ts-sec { padding: 22px 0 8px; border-top: 1px solid var(--border-soft); }
.ts-sec:first-child { border-top: 0; }
.ts-strip + .ts-sec, .tree-panel-msg + .ts-sec { border-top: 0; padding-top: 18px; }
.ts-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; color: var(--text-strong);
    font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ts-n { flex: 0 0 auto; color: var(--accent-text); font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.04em; }
.ts-text { max-width: 66ch; color: var(--text); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.ts-text > p { margin: 0 0 13px; }
.ts-text strong { color: var(--text-strong); font-weight: 600; }
.ts-sub-h { margin: 20px 0 8px; color: var(--text-dim); font-size: 12px; font-weight: 600; line-height: 1.4;
    letter-spacing: 0.06em; text-transform: uppercase; }
.ts-text > .ts-sub-h:first-child { margin-top: 2px; }
.ts-aside { color: var(--text-dim); font-size: 13px; }
.ts-hr { margin: 18px 0 14px; border: 0; border-top: 1px solid var(--border-soft); }

/* Альбомы в тексте. */
.ts-cite { color: var(--text-strong); font-style: normal; font-weight: 500; }
.ts-link { border-radius: 3px; color: var(--text-strong); cursor: pointer; font-weight: 500; text-decoration: underline;
    text-decoration-color: var(--accent-dim); text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: color 0.12s, background-color 0.12s; }
.ts-link:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration-color: var(--accent); }
.ts-link:focus-visible, .ts button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
/* Альбом списка: рамка фокуса — внутрь (в колонке и в ленте, которые листаются сами, её не срезает край) и
   поверх обложки: своя рамка плитки рисовалась под картинкой, и от неё оставалась скоба вокруг подписи. */
.tsr-item:focus-visible { outline: none; }
.tsr-item:focus-visible::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
    outline: 2px solid var(--accent-strong); outline-offset: -2px; pointer-events: none; }
/* Tab ведёт по ссылкам под прилипшей шапкой — фокус не должен уезжать под неё. */
.ts-link, .tsr-item, .tsr-more, .ts-body .btn, .ts-foot .btn { scroll-margin-top: calc(var(--ts-stick) + var(--ts-head) + 12px); }

/* Списки: обычные пункты, нумерованные, строки альбомов. */
.ts-list { margin: 2px 0 16px; padding: 0; list-style: none; }
.ts-list .ts-list { margin: 8px 0 2px; }
.ts-item { position: relative; margin: 0 0 8px; padding-left: 18px; break-inside: avoid; }
.ts-bullets > .ts-item::before { content: ''; position: absolute; left: 3px; top: 0.74em; width: 5px; height: 5px;
    border-radius: 50%; background: var(--accent-dim); }
.ts-num { padding-left: 26px; list-style: decimal; }
.ts-num > .ts-item { padding-left: 2px; }
.ts-num > .ts-item::marker { color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; }
.ts-rows { border-top: 1px solid var(--border-soft); }
.ts-row { display: grid; grid-template-columns: minmax(4ch, max-content) minmax(0, 1fr); column-gap: 14px;
    align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.45;
    break-inside: avoid; }
.ts-row > .ts-list { grid-column: 2; }
/* В списке есть диапазон лет («2024–2025») — колонка года одной ширины у всех строк, текст с одной линии. */
.ts-range > .ts-row > .ts-year { min-width: 9.5ch; }
.ts-year { color: var(--text-dim); font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
    white-space: nowrap; }
.ts-what { color: var(--text-mid); font-size: 14px; }
.ts-prose { color: var(--text); font-size: 15px; line-height: 1.6; }
.ts-name { color: var(--text-strong); font-size: 15px; font-weight: 500; }
.ts-sub { color: var(--text-dim); }

/* «Альбомы из рассказа» под текстом (600–1429 px): сетка строк «обложка | название, год» на ширину текста.
   Высота строки — 56 px (под палец); обложка занимает своё место сразу — картинка ничего не двигает.
   Строка шире обложки на 4 px слева (поле под наведение) — список сдвинут на них: обложки стоят на линии
   заголовка списка и текста. */
.ts-rail { max-width: var(--ts-col); margin: 0 auto; padding: 18px 0 10px; border-top: 1px solid var(--border-soft); }
.tsr-h { margin: 0 0 10px; color: var(--text-mid); font-size: 13px; font-weight: 600; line-height: 1.3; }
.tsr-n { margin-left: 4px; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.tsr-note { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.tsr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; margin: 0 0 0 -4px;
    padding: 0; list-style: none; }
.tsr-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 8px 4px 4px;
    border-radius: var(--radius-sm); color: var(--text); cursor: pointer; text-decoration: none;
    transition: background-color 0.12s; }
.tsr-item:hover { background: var(--bg-card-hover); }
.tsr .tc-cover { width: 48px; height: 48px; flex: 0 0 48px; }
.tsr .tc-cover-empty { font-size: 18px; }
.tsr-txt { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.tsr-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    color: var(--text-strong); font-size: 13.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.tsr-year { color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
/* «ещё N»: в разметке — число скрытых для каждой раскладки и «Свернуть список»; что видно, решают условия ниже.
   Пометку tsr-gtN ставит tree_story_rail.js, когда раскладке N есть что скрывать (не меньше трёх альбомов). */
.tsr-more { display: none; align-self: flex-start; min-height: 36px; margin: 8px 0 0; }
.tsr-m12, .tsr-m8, .tsr-m6, .tsr-less { display: none; }
.tsr-open .tsr-less { display: inline; }
@media (min-width: 600px) and (max-width: 1429px) {
    .tsr-gt6:not(.tsr-open) > .tsr-list > .tsr-li:nth-child(n+7) { display: none; }
    .tsr-gt6 > .tsr-more { display: inline-flex; align-items: center; }
    .tsr:not(.tsr-open) .tsr-m6 { display: inline; }
}
/* Альбом и его упоминания в тексте подсвечивают друг друга — там, где есть наведение. */
@media (hover: hover) {
    .ts-link.ts-hl { background: var(--accent-soft); text-decoration-color: var(--accent); }
    .tsr-item.ts-hl { background: var(--accent-soft); }
}

/* Списки, где каждый пункт помещается в строку колонки (решает разбор, tree_story_text.js: FIT знаков на
   285 px), — в две колонки; читаются сверху вниз. На телефоне колонок нет вовсе — список остаётся обычным
   потоком. Отступ пунктов — внутренний: внешний в колонках не схлопывается с отступом списка, и под
   списком выходило 45 px пустоты вместо 19. */
@media (min-width: 600px) {
    .ts-cols { columns: 2 285px; column-gap: 32px; }
    .ts-bullets.ts-cols, .ts-num.ts-cols { margin-bottom: 8px; }
    .ts-cols > .ts-item { margin-bottom: 0; padding-bottom: 8px; }
}

/* Широкая карточка: слева поле заголовков 190 px. Ей нужно 880 px свободной ширины, а та зависит от
   каркаса приложения: боковая панель 240 px (от 1200 px), свёрнутая 76 px (альбомная до 1199 px), шапка
   телефона без панели (портрет до 1024 px). В окне 1025–1199 px в портрете панель развёрнута — поля
   заголовков нет. Колонка чтения с полем — 226 px + 66ch, по центру карточки. */
@media (min-width: 1200px), (min-width: 1046px) and (orientation: landscape),
       (min-width: 918px) and (max-width: 1024px) and (orientation: portrait) {
    .ts { --ts-col: calc(66ch + 226px); --ts-pad: 28px; }
    /* Рассказ без разделов — без поля заголовков: колонка текста, список альбомов под ней, заголовок карточки
       и «Свернуть рассказ» — по ширине текста, по центру карточки. */
    .ts:has(.ts-main > .ts-flat:only-child) { --ts-col: 66ch; }
    .ts-foot { padding-bottom: 20px; }
    /* Заголовок раздела — в поле слева и рядом с текстом, пока раздел на экране. */
    .ts-sec { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 36px; align-items: start;
        padding: 26px 0 12px; }
    .ts-h { position: sticky; top: calc(var(--ts-stick) + var(--ts-head) + 18px); flex-direction: column; gap: 6px;
        margin: 3px 0 0; font-size: 18px; }
    .ts-flat > .ts-text { grid-column: 2; }
    .ts-flat:only-child { display: block; }
    /* Альбомы под текстом — как ещё один раздел: заголовок в поле слева, сетка — на ширину текста. */
    .ts-rail { padding: 24px 0 14px; }
    .tsr { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 36px; align-items: start; }
    .tsr-h { grid-row: 1 / span 3; margin: 4px 0 0; color: var(--text-strong); font-size: 15px; }
    .tsr-list, .tsr-more, .tsr-note { grid-column: 2; }
    .tsr-more { justify-self: start; }
    /* …а у рассказа без разделов поля нет. :where — чтобы правила колонки альбомов ниже (от 1430 px) не
       проигрывали этим по весу селектора. */
    :where(.ts:has(.ts-main > .ts-flat:only-child)) .tsr { display: block; }
    :where(.ts:has(.ts-main > .ts-flat:only-child)) .tsr-h { margin: 0 0 10px; }
}

/* От 1430 px справа от текста остаётся место (от 150 px): альбомы — в своей колонке. Порог — окно 1440 px
   без полосы прокрутки: WebKit не считает её в ширину условия (в окне 1440 px условие видит 1430), Chrome
   считает; колонке альбомов — не меньше 168 px, недостающие 5–15 px отдаёт колонка текста. Колонка текста
   прежняя (поле заголовков 190 + 36 + 66ch) и стоит у левого поля, заголовок карточки — над ней.
   Список едет рядом с текстом (sticky) и стоит в потоке: карточка не ниже свёрнутого списка (короткий текст
   его не обрезает, пустой высоты под одним альбомом нет). Выше окна он не бывает: предел — окно без шапок,
   подвала карточки и отступов (раскрытый список в конце рассказа помещается между шапкой и «Свернуть
   рассказ»); что не поместилось, листается внутри него — полоса прокрутки видна, нижний край затухает. */
@media (min-width: 1430px) {
    .ts-grid.ts-has-rail { display: grid; grid-template-columns: minmax(0, var(--ts-col)) minmax(168px, 1fr);
        column-gap: 30px; }
    .ts-has-rail > .ts-main { max-width: none; margin: 0; }
    .ts:has(.ts-has-rail) .ts-foot { max-width: none; }
    .ts:has(.ts-has-rail) .ts-head { padding-left: var(--ts-pad); }
    .ts-has-rail > .ts-rail { max-width: none; margin: 0; padding: 26px 0 12px; border-top: 0; }
    .ts-has-rail .tsr { position: sticky; top: calc(var(--ts-stick) + var(--ts-head) + 18px); display: flex;
        flex-direction: column; align-items: stretch; max-height: calc(100vh - var(--ts-stick) - var(--ts-head) - 104px);
        max-height: calc(100dvh - var(--ts-stick) - var(--ts-head) - 104px); }
    /* Заголовок списка — на первой строке текста (её высота 25.5 px). */
    .ts-has-rail .tsr-h { margin: 0 0 6px; color: var(--text-mid); font-size: 13px; line-height: 25.5px; }
    .ts-has-rail .tsr-list { flex: 0 1 auto; grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 0;
        margin-right: -8px; padding: 0 8px 14px 0; overflow-y: auto;
        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent);
        mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent); }
    /* Своя полоса прокрутки видна всегда, когда список листается (macOS прячет системную до первой прокрутки). */
    .ts-has-rail .tsr-list::-webkit-scrollbar { width: 6px; }
    .ts-has-rail .tsr-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
    .ts-has-rail .tsr-title { -webkit-line-clamp: 3; }
    .ts-has-rail .tsr-more { align-self: flex-start; flex: 0 0 auto; margin-top: 0; }
    @supports not selector(::-webkit-scrollbar) {
        .ts-has-rail .tsr-list { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
    }
}
/* 1430–1679 px: колонка узкая (168–400 px) — строки, видно восемь (помещаются и на экране 800 px высотой). */
@media (min-width: 1430px) and (max-width: 1679px) {
    .tsr-gt8:not(.tsr-open) > .tsr-list > .tsr-li:nth-child(n+9) { display: none; }
    .tsr-gt8 > .tsr-more { display: inline-flex; align-items: center; }
    .tsr:not(.tsr-open) .tsr-m8 { display: inline; }
}
/* От 1680 px колонка альбомов — от 400 px: плитки с обложкой сверху, четыре в ряд (обложка 90–104 px —
   как у плиток древа), видно двенадцать — три ряда. У рассказа без разделов колонка шире (680 px) — тех же
   плиток шесть в ряд. Один-три альбома (.tsr-few) плитками оставляли колонку пустой — они идут строками с
   обложкой 96 px на всю её ширину. */
@media (min-width: 1680px) {
    .ts-has-rail .tsr:not(.tsr-few) .tsr-list { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px;
        margin-left: 0; }
    .ts-has-rail .tsr:not(.tsr-few) .tsr-item { flex-direction: column; align-items: stretch; gap: 7px; padding: 0 0 4px; }
    .ts-has-rail .tsr:not(.tsr-few) .tc-cover { width: 100%; height: auto; aspect-ratio: 1; flex: 0 0 auto;
        border-radius: var(--radius-sm); }
    .ts-has-rail .tsr:not(.tsr-few) .tc-cover-empty { font-size: 30px; }
    .ts-has-rail .tsr:not(.tsr-few) .tsr-title { -webkit-line-clamp: 2; font-size: 13px; }
    .ts-has-rail .tsr:not(.tsr-few) .tsr-txt { padding: 0 2px; }
    .ts-has-rail .tsr-few .tsr-list { gap: 6px; }
    .ts-has-rail .tsr-few .tsr-item { gap: 14px; }
    .ts-has-rail .tsr-few .tc-cover { width: 96px; height: 96px; flex: 0 0 96px; border-radius: var(--radius-sm); }
    .ts-has-rail .tsr-few .tc-cover-empty { font-size: 30px; }
    .ts-has-rail .tsr-few .tsr-title { font-size: 15px; }
    .tsr-gt12:not(.tsr-open) > .tsr-list > .tsr-li:nth-child(n+13) { display: none; }
    .tsr-gt12 > .tsr-more { display: inline-flex; align-items: center; }
    .tsr:not(.tsr-open) .tsr-m12 { display: inline; }
}
@media (max-width: 599px) {
    .ts { --ts-pad: 16px; }
    .ts-body { padding-bottom: 4px; }
    .ts-foot { padding-bottom: 16px; }
    .ts-sec { padding: 18px 0 4px; }
    .ts-h { font-size: 18px; }
    .ts-text { font-size: 15.5px; line-height: 1.65; }
    .ts-prose, .ts-name { font-size: 15.5px; }
    .ts-row { column-gap: 12px; padding: 7px 0; }
    /* Альбомы — лента плиток под текстом: листается сама, от края до края карточки; страница вбок не едет. */
    .ts-rail { padding: 16px 0 6px; }
    .tsr-list { display: flex; gap: 10px; margin: 0 -16px; padding: 2px 16px 10px; overflow-x: auto;
        overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: none; }
    .tsr-list::-webkit-scrollbar { display: none; }
    .tsr-li { flex: 0 0 116px; scroll-snap-align: start; }
    .tsr-item { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 0 4px; }
    .tsr .tc-cover { width: 116px; height: 116px; flex: 0 0 116px; border-radius: var(--radius-sm); }
    .tsr .tc-cover-empty { font-size: 30px; }
}
/* Палец: всё, что нажимается в карточке, — не ниже 44 px (шапка выше на те же 4 px). */
@media (pointer: coarse) {
    .tree-panel[data-tree-panel="story"] { --ts-head: 61px; }
    .tree-panel[data-tree-panel="story"] .ts-x { min-width: 44px; min-height: 44px; }
    .tree-panel[data-tree-panel="story"] .ts-foot .btn, .tree-panel[data-tree-panel="story"] .ts-strip .btn,
    .tsr-more { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ts-link, .tsr-item { transition: none; }
    .ts-wait .dossier-spin, .ts-strip .dossier-spin { animation: none; }
}
} /* ── end @layer responsive ── */