/* ═══════════════════════════════════════════════════════════════════════════
   ЛЕНТА УПРАВЛЕНИЙ — общий вид карточки и ленты. Подключают два экрана:
   lenta.html (вся лента с чипами управлений) и главный экран приложения
   (app/glavnaya.html, раздел «Лента управлений»). Разметку строит
   core/lenta.js (встроить, карточка, лист) — здесь только её вид.

   ИМЕНА КЛАССОВ. Все начинаются с ln-: этот файл подключён и на главном
   экране, а там есть свои .k («Начать», «Цитата дня»), и однобуквенное имя
   красило их фоном и рамкой карточки (ревью 8.8, F13). Короткие общие имена
   в общем файле — мина: страница-хозяин про них не знает.

   КАРТОЧКА v2 (разбор владельца 05.09.2026): источник назван ОДИН раз —
   именем канала в шапке (это указание источника по лицензии); слово
   «Телеграм» живёт только в меню «⋯» у действия «Открыть в Телеграме».
   Действий внизу два: «Поделиться» и «⋯». Чипа типа записи нет: типы
   угадывались неверно (запись со ссылкой на видео считалась фото).
   ЖИВАЯ ЛЕНТА (8.9): полоса «Есть новые записи» над лентой (.ln-novye) и
   короткий обвод у карточки, которую сервер поправил (.ln-k--pravka).
   Всё на ролях core/tokeny.css — обе темы из одних правил.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Чипы управлений (только у экрана ленты). Цель нажатия ≥48 — ::before. */
.chipy{display:flex;gap:8px;padding:6px 16px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding:0 16px}
.chipy::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px 0 6px;border-radius:18px;border:0;
  background:var(--surface-container);color:var(--on-surface);font:var(--type-label-l);cursor:pointer;position:relative;white-space:nowrap;scroll-snap-align:start}
.chip.bez{padding-left:12px}
.chip::before{content:"";position:absolute;inset:-6px 0}
.chip[aria-pressed="true"]{background:var(--secondary-container);color:var(--on-secondary-container)}
/* Круг под эмблемой; как в нём сидит картинка — общее правило yu-emblema из
   core/tokeny.css, а не своё число здесь. */
.chip .mdisk{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--outline-variant);display:flex;align-items:center;justify-content:center;
  font:var(--type-label-s);color:#101418;overflow:hidden}

/* ── Полоса состояния: без сети / сервер не отвечает — над лентой. */
/* Полоса состояния — сообщение, а не плита: 720 px это её предел. Без него
   слова стояли у левого края монитора, а кнопка «Повторить» — у правого, и
   между ними было 3170 px. */
.polosa{margin:10px var(--pole-polosy,16px) 0;max-width:720px;padding:10px 12px;border-radius:var(--shape-m);background:var(--surface-container);display:flex;gap:10px;align-items:flex-start;font:var(--type-body-s);color:var(--on-surface)}
.polosa svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--on-surface-variant);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.polosa > div{flex:1;min-width:0}
.polosa b{font:var(--type-label-m);display:block;margin-bottom:2px}
/* Синие ПОДПИСИ во всём файле («Повторить», «Есть новые записи», «Показать
   ещё», «Обновить», «Все управления», кнопки жалобы) берут --ya-primary-ink,
   а не сам --primary: буквами на светлых подложках акцент давал 3.86…4.26.
   Заливки, значки, кольцо и обводка фокуса остаются на --primary — им и
   довольно 3:1. */
.polosa button{flex:0 0 auto;font:var(--type-label-m);color:var(--ya-primary-ink);background:none;border:0;padding:0 6px;min-height:36px;min-width:48px;cursor:pointer;position:relative}
/* Полоса не должна расти ради пальца: кнопка остаётся ростом в 36, а цель
   нажатия добирается до 48 невидимым расширителем — как у чипов. */
.polosa button::before{content:"";position:absolute;inset:-6px 0}

/* ── Лента, пачки, метки месяцев. */
.lenta{list-style:none;padding:10px var(--pole-polosy,16px) 0;display:flex;flex-direction:column;gap:10px}
.ln-pachka{display:flex;flex-direction:column;gap:10px}
/* НА ШИРОКОМ ЭКРАНЕ ЗАПИСИ ИДУТ В ДВА СТОЛБЦА. Столбиком они превращались
   в полосы во всю ширину окна. Сетка стоит на пачке, а не на самой ленте:
   между пачками стоят метки месяцев, и они обязаны идти во всю ширину. */
/* auto-FILL, а не auto-fit: auto-fit схлопывает пустые колонки, и пачка из
   одной записи снова становится полосой во всю полосу. Проверено подсадкой
   записей на живую страницу: пачка из трёх — карточка 473 px, пачка из
   одной — 1440 px (2560). Месяц с одной новостью — обычное дело, и он не
   должен выглядеть иначе, чем месяц с тремя. */
@media (min-width:900px){
  .ln-pachka{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));align-items:start}
}
.mesyac{font:var(--type-label-m);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-surface-variant);
  display:flex;align-items:center;gap:10px;margin:8px 2px 0}
.mesyac::after{content:"";flex:1;height:1px;background:var(--outline-variant)}

/* ── Карточка. */
.ln-k{background:var(--surface-container-low);border:1px solid var(--outline-variant);border-radius:var(--shape-l);overflow:hidden}
.k-telo{display:block;color:inherit;text-decoration:none;padding:12px 14px 4px}
.k-telo:active{background:var(--surface-container-high)}
.k-shapka{display:flex;gap:10px;align-items:center;min-height:36px}
.disk{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--outline-variant);
  box-shadow:0 1px 2px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font:var(--type-label-l);color:#101418;overflow:hidden}
.k-kto{min-width:0;flex:1}
.k-upr{font:var(--type-title-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* «@канал · время ↗» — одна строка, переносится при большом кегле; имя канала
   не режется никогда (это указание источника). */
.k-meta{font:var(--type-label-s);color:var(--on-surface-variant);display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:0;min-width:0}
.k-meta .kanal{min-width:0;overflow-wrap:anywhere}
.k-meta time{flex:0 0 auto;font-variant-numeric:tabular-nums}
.k-meta time::before{content:"·";margin-right:6px}
.k-meta .vyhod{display:inline-flex;align-items:center}
.k-meta .vyhod svg{width:12px;height:12px;stroke:var(--on-surface-variant);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-vedet{font:var(--type-label-s);color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-soderzh{display:flex;gap:12px;margin-top:10px;align-items:flex-start}
.k-tekst{flex:1;min-width:0}
.k-zag{font:var(--type-title-m);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.k-vyd{font:var(--type-body-m);color:var(--on-surface-variant);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-line}
.k-zag + .k-vyd{margin-top:4px;font:var(--type-body-s)}
.k-tekst > .k-vyd:first-child{-webkit-line-clamp:4}
.k-mini{flex:0 0 96px;width:96px;height:96px;border-radius:var(--shape-m);border:1px solid var(--outline-variant);overflow:hidden;position:relative;background:var(--surface-container-high)}
.k-mini img{width:100%;height:100%;object-fit:cover;display:block}
.k-mini .n{position:absolute;left:6px;top:6px;padding:1px 6px;border-radius:6px;background:rgba(16,20,24,.62);color:#fff;font:var(--type-label-s)}
.k-video{display:flex;gap:10px;align-items:center;margin-top:10px;padding:6px;border-radius:var(--shape-m);background:var(--surface-container)}
.kadr{flex:0 0 96px;width:96px;height:54px;border-radius:8px;overflow:hidden;position:relative;background:var(--surface-container-high)}
.kadr.bez{display:flex;align-items:center;justify-content:center}
.kadr .igrat{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.kadr .igrat svg{width:14px;height:14px;fill:#fff;stroke:none;margin-left:2px}
.k-video b{display:block;font:var(--type-label-m);color:var(--on-surface)}
.k-video small{display:block;font:var(--type-label-s);color:var(--on-surface-variant);margin-top:2px}
.k-plashka{display:flex;gap:10px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:var(--shape-m);background:var(--surface-container);font:var(--type-body-s);color:var(--on-surface-variant)}
.k-plashka svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-ssylka{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:0 10px;height:28px;border-radius:14px;background:var(--surface-container);font:var(--type-label-s);color:var(--on-surface-variant);max-width:100%}
.k-ssylka svg{flex:0 0 13px;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Действия — в шапке карточки, справа от имени управления (как во всех
   лентах телефона): нижний ряд прибавлял ~44 dp пустоты каждой карточке.
   Кнопки лежат ВНЕ ссылки тела (кнопка внутри <a> — невалидна), а визуально
   стоят в шапке: абсолютное положение, шапка оставляет им место справа. */
.ln-k{position:relative}
.k-shapka{padding-right:88px}
.k-telo{padding-bottom:12px}
.k-niz{position:absolute;top:6px;right:6px;display:flex;align-items:center;gap:0}
.k-share,.k-esche{width:40px;height:40px;border-radius:50%;border:0;background:none;color:var(--on-surface-variant);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.k-share::before,.k-esche::before{content:"";position:absolute;inset:-4px}
.k-share svg,.k-esche svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-esche svg{stroke-width:2.6}
.k-share:active,.k-esche:active{background:var(--surface-container-high)}

/* ── Полоса «Есть новые записи» (живая лента 8.9). Пока человек читает
   середину ленты, новое сверху не въезжает ему под ноги, а ждёт здесь.
   Липкая: полоса над лентой, увиденная только с самого верха, не сказала бы
   о новом никому. Липнет НИЖЕ шапки оболочки и чипов управлений — высоту
   чипов кладёт в --ln-lipko сам модуль (он их и меряет). Неброская: та же
   подложка, что у карточек, без заливки цветом и без движения. */
.ln-novye{position:sticky;top:calc(var(--yk-shapka,0px) + var(--ln-lipko,0px) + 8px);z-index:9;
  display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:calc(100% - 32px);
  margin:0 auto 10px;padding:0 16px;min-height:40px;border-radius:20px;border:1px solid var(--outline-variant);
  background:var(--surface-container-high);color:var(--ya-primary-ink);font:var(--type-label-l);cursor:pointer;box-shadow:var(--elev-3)}
.ln-novye svg{flex:0 0 16px;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ln-novye:active{background:var(--surface-container-highest)}

/* ── «Показать ещё» — вместо бесконечной прокрутки. */
.esche-kn{display:block;width:calc(100% - 32px);margin:12px 16px 0;min-height:48px;border-radius:24px;border:1px solid var(--outline);
  background:var(--surface-container-low);color:var(--ya-primary-ink);font:var(--type-label-l);cursor:pointer}
.esche-kn:active{background:var(--surface-container-high)}
.esche-kn.beda{color:var(--error);border-color:var(--error)}

/* ── Скелет: первое открытие и «Загружаю ещё…». */
.skelet{list-style:none;padding:10px 16px 0;display:flex;flex-direction:column;gap:10px}
.sk{background:var(--surface-container-low);border:1px solid var(--outline-variant);border-radius:var(--shape-l);padding:12px 14px 14px}
.sk-r{display:flex;gap:10px;align-items:center}
.sk i{display:block;background:var(--surface-container-high);border-radius:6px;height:12px}
.sk .d{width:36px;height:36px;border-radius:50%;flex:0 0 36px}
.sk .s1{width:120px;height:14px;margin-bottom:6px}.sk .s2{width:180px;height:10px;max-width:50vw}
.sk .t{margin-top:12px;height:14px;width:88%}.sk .t2{width:70%}.sk .t3{width:60%;height:11px;margin-top:8px}
.sk-podpis{display:flex;align-items:center;justify-content:center;gap:10px;font:var(--type-label-m);color:var(--on-surface-variant);padding:6px 0 4px}
.kolco{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--outline-variant);border-top-color:var(--primary)}

/* ── Тихие состояния, концовка, подпись. */
.tiho-sost{margin:12px var(--pole-polosy,16px) 0;max-width:720px;padding:12px 14px;border-radius:var(--shape-m);background:var(--surface-container-low);border:1px solid var(--outline-variant);
  font:var(--type-body-s);color:var(--on-surface-variant);text-wrap:pretty;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tiho-sost span{flex:1;min-width:0}
.tiho-sost button{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--outline);background:none;color:var(--ya-primary-ink);font:var(--type-label-m);cursor:pointer;position:relative}
/* −7, а не −6: у этой кнопки есть рамка, и расширитель считается от поля
   внутри неё — иначе цель выходит 46, а не 48. */
.tiho-sost button::before{content:"";position:absolute;inset:-7px 0}
/* Подпись под лентой, которая живёт снимком из хранилища. Не ошибка и не
   тревога: лента полная и свежая, недоступно только листание — поэтому та же
   спокойная подложка, что у тихих состояний, и никакого красного. Стоит
   ВНИЗУ, на месте кнопки «Показать ещё»: человек ищет её именно там. */
.ln-snimok-niz{margin:12px var(--pole-polosy,16px) 0;max-width:720px;padding:12px 14px;border-radius:var(--shape-m);background:var(--surface-container-low);border:1px solid var(--outline-variant);
  font:var(--type-body-s);color:var(--on-surface-variant);text-wrap:pretty;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ln-snimok-niz span{flex:1;min-width:0}
.ln-snimok-niz button{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--outline);background:none;color:var(--ya-primary-ink);font:var(--type-label-m);cursor:pointer;position:relative}
.ln-snimok-niz button::before{content:"";position:absolute;inset:-7px 0}
.konec{margin:18px 16px 0;padding:18px 16px 16px;text-align:center;border-radius:var(--shape-l);background:var(--surface-container-low);border:1px solid var(--outline-variant)}
.konec svg.luchi{width:36px;height:36px;stroke:var(--tertiary);stroke-width:1.8;stroke-linecap:round;fill:none;margin-bottom:6px}
.konec b{display:block;font:var(--type-title-s)}
.konec p{margin:6px 0 0;font:var(--type-body-s);color:var(--on-surface-variant);text-wrap:pretty}
.konec a.dver{display:inline-flex;align-items:center;gap:4px;margin-top:10px;min-height:48px;padding:0 16px;border-radius:24px;border:1px solid var(--outline);color:var(--ya-primary-ink);font:var(--type-label-l);text-decoration:none}
.konec .prava{margin-top:12px;padding-top:12px;border-top:1px solid var(--outline-variant);font:var(--type-label-s);color:var(--on-surface-variant);line-height:1.45}
.o-sebe{margin:14px 16px 8px;font:var(--type-label-s);color:var(--on-surface-variant);text-align:center;line-height:1.45}

/* ── Встроенная лента (главный экран): без собственных полей — их даёт
   родительский экран; края ленты совпадают с краями остальных карточек. */
.ln-vstroeno .lenta,.ln-vstroeno .skelet{padding-left:0;padding-right:0}
.ln-vstroeno .lenta{padding-top:0}
.ln-vstroeno .polosa,.ln-vstroeno .tiho-sost,.ln-vstroeno .ln-snimok-niz,.ln-vstroeno .konec,.ln-vstroeno .o-sebe{margin-left:0;margin-right:0}
.ln-vstroeno .esche-kn{width:100%;margin-left:0;margin-right:0}

/* ── Лист действий, жалоба, короткое сообщение. Поверх наббара оболочки. */
.scrim{position:fixed;inset:0;z-index:140;background:var(--scrim,rgba(0,0,0,.32))}
.list{position:fixed;left:0;right:0;bottom:0;z-index:141;background:var(--surface-container-low);color:var(--on-surface);border-radius:var(--shape-xl) var(--shape-xl) 0 0;
  padding:8px 8px calc(20px + var(--yk-snizu,0px));box-shadow:0 -6px 24px rgba(0,0,0,.18);max-height:88vh;overflow-y:auto}
.list-ruchka{width:32px;height:4px;border-radius:2px;background:var(--outline-variant);margin:4px auto 10px}
.list-zag{padding:0 12px 4px;font:var(--type-title-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-o{padding:0 12px 8px;font:var(--type-label-s);color:var(--on-surface-variant)}
.list-p{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--on-surface);font:var(--type-body-m);text-align:left;text-decoration:none;cursor:pointer}
.list-p:active{background:var(--surface-container-high)}
.list-p svg{flex:0 0 auto;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--primary)}
.list-p.zhaloba{color:var(--error)}
.list-p.zhaloba svg{color:var(--error)}
.zh-forma{padding:0 12px}
.zh-forma fieldset{border:0;margin-top:6px}
.zh-forma legend{font:var(--type-label-m);color:var(--on-surface-variant);margin-bottom:4px}
.zh-forma label.pr{display:flex;align-items:center;gap:12px;min-height:48px;font:var(--type-body-m);cursor:pointer}
.zh-forma label.pr input{width:20px;height:20px;accent-color:var(--primary);flex:0 0 auto}
.zh-forma label.pole{display:block;margin-top:10px;font:var(--type-label-m);color:var(--on-surface-variant)}
.zh-forma textarea,.zh-forma input[type="text"]{display:block;width:100%;margin-top:4px;padding:10px 12px;border-radius:var(--shape-s);border:1px solid var(--outline);background:var(--surface-container-lowest);color:var(--on-surface);font:var(--type-body-m)}
.zh-forma textarea{min-height:72px;resize:vertical}
.zh-knopki{display:flex;gap:8px;margin-top:14px}
.zh-kn{flex:1;min-height:44px;border-radius:22px;border:1px solid var(--outline);background:none;color:var(--ya-primary-ink);font:var(--type-label-l);cursor:pointer}
.zh-kn.glav{background:var(--primary);color:var(--on-primary);border-color:transparent}
.zh-kn[disabled]{opacity:.6;cursor:default}
.zh-itog{padding:6px 12px 0;font:var(--type-body-s);color:var(--on-surface-variant);text-wrap:pretty}
.zh-itog.beda{color:var(--error)}
.snek{position:fixed;left:16px;right:16px;bottom:calc(var(--yk-nav,0px) + 16px);z-index:142;padding:12px 16px;border-radius:var(--shape-s);background:var(--inverse-surface);color:var(--inverse-on-surface);font:var(--type-body-s);box-shadow:var(--elev-3);text-align:center}

/* ── Фокус. */
.chip:focus-visible,.k-telo:focus-visible,.k-share:focus-visible,.k-esche:focus-visible,.esche-kn:focus-visible,.ln-novye:focus-visible,
.list-p:focus-visible,.polosa button:focus-visible,.tiho-sost button:focus-visible,.ln-snimok-niz button:focus-visible,.konec a:focus-visible,.zh-kn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── Движение: подъём только первой пачки; скелет дышит; лист снизу. */
@media (prefers-reduced-motion: no-preference){
  .sk{animation:ln-dyh 1.1s ease-in-out infinite alternate}
  @keyframes ln-dyh{from{opacity:.55}to{opacity:1}}
  .kolco{animation:ln-vr 1s linear infinite}
  @keyframes ln-vr{to{transform:rotate(360deg)}}
  .ln-pachka--pervaya .ln-k{opacity:0;transform:translateY(8px);animation:ln-pod .34s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--n,0) * 45ms)}
  @keyframes ln-pod{to{opacity:1;transform:none}}
  /* Правка пришла с сервера: карточка заменена на месте (F09). Она не
     всплывает заново вместе с пачкой — только коротко обводится, чтобы глаз
     заметил, что изменилось именно здесь. Заливку не трогаем: у главного
     экрана карточка своего цвета. */
  .ln-k--pravka,.ln-pachka--pervaya .ln-k.ln-k--pravka{opacity:1;transform:none;
    animation:ln-pravka 1.2s var(--ease-standard,cubic-bezier(.2,0,0,1))}
  @keyframes ln-pravka{from{box-shadow:inset 0 0 0 2px var(--primary)}to{box-shadow:inset 0 0 0 2px transparent}}
  .list{animation:ln-snizu var(--dur-long,400ms) var(--ease-emphasized-decel,cubic-bezier(.05,.7,.1,1)) both}
  @keyframes ln-snizu{from{transform:translateY(100%)}to{transform:none}}
  .snek{animation:ln-snek var(--dur-medium,300ms) var(--ease-emphasized-decel,cubic-bezier(.05,.7,.1,1)) both}
  @keyframes ln-snek{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}