/* ==========================================================================
   BeKavod — страница журнала.
   Дополняет css/style.css: токены, шрифты и кнопки берутся оттуда.

   Два состояния страницы различает класс .authed на <html>, его ставит
   скрипт. Гостю кадры не приходят вовсе — размытая рамка рисуется CSS,
   доставать из неё нечего.
   ========================================================================== */

.jrn-page{background:var(--bg)}

/* У .btn и .who свой display, и он перебивает атрибут hidden — кнопки
   «Войти» и «Выйти» показывались одновременно. Возвращаем атрибуту силу. */
[hidden]{display:none !important}

/* ---------------------------------------------------------------- шапка */
.topbar{position:sticky;inset-block-start:0;z-index:20;
        background:rgba(18,16,14,.86);backdrop-filter:blur(12px);
        border-block-end:1px solid var(--line)}
.topbar__in{display:flex;align-items:center;gap:22px;
            padding-block:14px;flex-wrap:wrap}
.topbar__nav{display:flex;gap:22px;margin-inline-start:auto;flex-wrap:wrap}
.topbar__nav a{font-size:14.5px;color:rgba(245,240,232,.78);text-decoration:none;
               padding-block:8px}
.topbar__nav a:hover{color:var(--ink)}
.topbar__nav a[aria-current]{color:var(--accent)}
.topbar__auth{display:flex;align-items:center;gap:12px}

.btn--sm{padding:9px 16px;font-size:14px}

.who{display:flex;align-items:center;gap:8px;font-family:var(--mono);
     font-size:12px;color:var(--ink-2)}
.who__dot{width:7px;height:7px;border-radius:50%;background:var(--good)}

/* ------------------------------------------------------------- полоса «закрыто» */
.lockbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
         gap:18px;margin-block-start:26px;padding:18px 22px;
         border:1px solid rgba(240,168,104,.28);border-radius:14px;
         background:linear-gradient(180deg,rgba(240,168,104,.07),rgba(240,168,104,.02))}
.lockbar__i{width:26px;height:26px;color:var(--accent);flex:none}
.lockbar__t{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.lockbar__t b{color:var(--ink)}

/* ---------------------------------------------------------------- заголовок */
.jrn{padding-block:0 clamp(56px,8vh,100px)}
.jrn__head{margin-block-start:clamp(28px,4vh,46px)}
.jrn__head h1{margin:0;font-size:clamp(28px,3.6vw,42px);line-height:1.1;
              font-weight:600;letter-spacing:-.026em;color:var(--ink)}
.jrn__sub{margin:12px 0 0;font-size:15px;color:var(--ink-2)}
#counter{font-family:var(--mono);font-size:13px;color:var(--ink-3)}

/* ---------------------------------------------------------------- фильтры */
.filters{position:relative;margin-block-start:clamp(20px,3vh,32px);
         padding:20px 22px;border:1px solid var(--line);border-radius:16px;
         background:var(--surface)}
.filters__row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.filters__row + .filters__row{margin-block-start:18px;
        padding-block-start:18px;border-block-start:1px solid var(--line)}
.filters__row--chips{align-items:center}

.fld{display:flex;flex-direction:column;gap:7px}
.fld--grow{flex:1 1 240px}
.fld__l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--ink-3)}
.fld input{width:100%;padding:11px 13px;font:inherit;font-size:15px;
           color:var(--ink);background:var(--bg);
           border:1px solid var(--line-strong);border-radius:9px}
.fld input:focus{outline:2px solid var(--accent);outline-offset:1px}
.fld input::placeholder{color:var(--ink-3)}
/* календарь у date-полей на тёмном фоне рисуется чёрным — осветляем */
.fld input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.8)}

.chipset{display:flex;gap:9px;flex-wrap:wrap}
.chip{padding:8px 14px;font:inherit;font-size:13.5px;
      color:var(--ink-2);background:var(--surface-2);
      border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;
      transition:background .15s,color .15s,border-color .15s}
.chip:hover:not(:disabled){color:var(--ink);border-color:rgba(245,240,232,.3)}
.chip[aria-pressed="true"]{background:var(--accent);color:#1A1409;
      border-color:var(--accent);font-weight:600}

/* накладка для гостя */
.filters__veil{position:absolute;inset:0;display:grid;place-items:center;
  border-radius:16px;background:rgba(18,16,14,.72);backdrop-filter:blur(3px);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.authed .filters__veil{display:none}
.filters:has(input:disabled) .fld,
.filters:has(input:disabled) .chipset{opacity:.45}

/* ------------------------------------------------------------------ лента
   Имя .jrn__feed, а не .feed: на главной .feed — это подвод провода
   к картинке, он position:absolute. Общий style.css грузится раньше,
   и лента журнала уезжала за экран. */
.jrn__feed{margin:clamp(26px,4vh,42px) 0 0;padding:0;list-style:none}
.entry + .entry{margin-block-start:18px}
.entry__day{margin:clamp(24px,3.4vh,38px) 0 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.entry:first-child .entry__day{margin-block-start:0}

.entry__in{display:grid;grid-template-columns:minmax(0,260px) 1fr;
           gap:22px;padding:16px;
           border:1px solid var(--line);border-radius:16px;
           background:var(--surface)}
/* ------------------------------------------- карточка на переоценке
   Пока модель пересматривает запись, старый разбор показывать нельзя: он
   как раз тот, который человек назвал неверным. Карточка сворачивается до
   одной полосы — время, вид записи и крутилка, — но остаётся на своём
   месте в ленте, чтобы не мигать и не прыгать. */
.entry.is-rechecking .entry__in--busy{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:14px 16px;border-color:rgba(240,168,104,.32);
  background:linear-gradient(90deg,rgba(240,168,104,.05),transparent 60%)}
.rechk{min-width:0}
.rechk__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.rechk__t{margin:5px 0 0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.rechk__t b{color:var(--ink-2);font-weight:600}

/* Крутилка. Кольцо с разрывом: у него видно направление вращения, а у
   пульсирующей точки — нет, и она читается как «зависло». */
.rechk__spin{width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(240,168,104,.2);border-top-color:var(--accent);
  animation:rechk-spin .8s linear infinite}
@keyframes rechk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .rechk__spin{animation-duration:2.4s}
}

.entry__left{min-width:0}

/* Пока идёт запись, колонка с кадром раздвигается: 260 пикселей хватает
   рамке-превью, но не просмотру. Только на широком экране — на узком
   колонка и так одна, и раздвигать нечего.

   Медиазапрос здесь обязателен, а не «на всякий случай»: у правила из
   мобильной секции ниже специфичность меньше (.entry__in против
   .entry.is-playing .entry__in), и оно бы проиграло — карточка на телефоне
   уезжала бы вбок вместе с текстом. */
@media (min-width:641px){
  .entry.is-playing .entry__in{grid-template-columns:minmax(0,440px) 1fr}
}
.entry__media{position:relative;aspect-ratio:16/10;border-radius:11px;
              overflow:hidden;background:#0E0C0A}

/* ------------------------------------------------- запись на месте
   Видео играет в карточке, а не в новой вкладке: во вкладку уходил файл
   с камеры как есть — до ста мегабайт, а с уличной камеры ещё и HEVC,
   которого десктопный браузер не умеет. Плеер встаёт на место кадра по
   нажатию и занимает ту же рамку. */
.vid{position:absolute;inset:0;width:100%;height:100%;
     object-fit:contain;background:#000;display:block}
.vid__no{display:none}
/* Плеер сказал, что не может это показать. Чёрный прямоугольник без
   объяснения читается как поломка сайта, поэтому объясняем. */
.entry__media.is-broken .vid{display:none}
.entry__media.is-broken .vid__no{display:block;margin:0;padding:14px;
  font-size:12.5px;line-height:1.45;color:var(--ink-2)}

/* Чем именно вы сейчас смотрите и где взять полное. Мелко и приглушённо:
   в девяти случаях из десяти лёгкой копии достаточно. */
.entry__orig{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.entry__orig-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase}
.entry__orig a{color:var(--ink-2);text-underline-offset:2px}
.entry__orig a:hover{color:var(--accent)}

/* Рамка кадра. Настоящий постер придёт из Frigate; пока рисуем ночной
   кадр средствами CSS, чтобы ничего не выдумывать картинкой. */
.shot{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 60% 30%, rgba(240,168,104,.10), transparent 60%),
    linear-gradient(200deg,#23201C 0%,#17140F 45%,#0D0B09 100%)}
.shot__grain{position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(0deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 3px)}
.shot__cam{position:absolute;inset-block-start:9px;inset-inline-start:11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(245,240,232,.5)}
.shot__play{position:absolute;inset:0;display:grid;place-items:center;
  font-size:20px;color:rgba(245,240,232,.85);
  text-shadow:0 2px 20px rgba(0,0,0,.8);
  /* это <button>, а не ссылка: сбрасываем всё, что рисует браузер */
  appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
  font-family:inherit}
.shot__play:hover{color:#fff}
.shot__dur{position:absolute;inset-block-end:9px;inset-inline-end:11px;
  padding:3px 7px;border-radius:5px;background:rgba(10,9,8,.72);
  font-family:var(--mono);font-size:11px;color:rgba(245,240,232,.8)}

/* закрытый кадр: сильное размытие + замок поверх */
.shot--locked{filter:blur(16px) saturate(.45) brightness(.75);transform:scale(1.15)}
.shot__lock{position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(240,168,104,.7)}
.shot__lock svg{width:26px;height:26px}

.entry__body{min-width:0}
.entry__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 0}
.entry__time{font-family:var(--mono);font-size:15px;color:var(--ink)}
.entry__time--to{color:var(--ink-2)}
.entry__dash{font-family:var(--mono);font-size:15px;color:var(--ink-3);
             margin-inline:-5px}

/* Длительность события. Для отрезка — сколько шло, для незакончившегося —
   сколько идёт, с пульсирующей точкой. */
.dur{padding:3px 9px;border-radius:999px;
     font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
     color:var(--ink-2);background:var(--surface-2);
     border:1px solid var(--line)}
.dur--live{display:inline-flex;align-items:center;gap:7px;
  color:var(--accent);background:rgba(240,168,104,.12);
  border-color:rgba(240,168,104,.4)}
.dur--live i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:durpulse 1.9s ease-out infinite}
@keyframes durpulse{
  0%{box-shadow:0 0 0 0 rgba(240,168,104,.55)}
  70%{box-shadow:0 0 0 7px rgba(240,168,104,0)}
  100%{box-shadow:0 0 0 0 rgba(240,168,104,0)}}

/* Идущее прямо сейчас событие выделяем рамкой: это не история, это «сейчас» */
.entry--live .entry__in{border-color:rgba(240,168,104,.4);
  box-shadow:0 0 0 1px rgba(240,168,104,.12), 0 18px 44px rgba(0,0,0,.4)}
.lvl{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
     letter-spacing:.04em;border:1px solid transparent}
.lvl--crit{color:#F0908C;background:rgba(208,59,59,.14);border-color:rgba(208,59,59,.4)}
.lvl--warn{color:#F3C765;background:rgba(250,178,25,.13);border-color:rgba(250,178,25,.35)}
.lvl--ok{color:#8FC98F;background:rgba(12,163,12,.12);border-color:rgba(12,163,12,.3)}
.kind{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
      text-transform:uppercase;color:var(--ink-3)}
/* Видов записи у события может быть несколько: вышел из туалета и сел есть.
   Без разделителя «ТУАЛЕТ ПРИЁМ ПИЩИ» читается как один длинный ярлык. */
.kind + .kind::before{content:"|";margin-inline-end:9px;
  color:var(--line-strong);font-weight:400}

.ev{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.ev li{padding:5px 10px;border-radius:7px;background:var(--surface-2);
       border:1px solid var(--line);
       font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}


/* =============================================== где он сейчас
   Не событие, а состояние. Стоит выше ленты и выглядит иначе, чем
   карточки: иначе глаз читает его как «ещё одну запись сверху». */
.now{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center;
     margin:0 0 22px;padding:14px 18px 14px 14px;border-radius:16px;
     background:var(--surface);border:1px solid var(--line-strong)}
.now--warn{border-color:rgba(250,178,25,.4);background:rgba(250,178,25,.05)}
.now--crit{border-color:rgba(208,59,59,.45);background:rgba(208,59,59,.06)}
.now__shot{aspect-ratio:4/3;border-radius:10px;overflow:hidden;
           background:var(--surface-2);border:1px solid var(--line)}
.now__img{width:100%;height:100%;object-fit:cover;display:block}
.now__eyebrow{display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.now__line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
           margin:6px 0 0;font-size:19px;font-weight:600;color:var(--ink)}
.now__ago{font-size:13px;font-weight:400;color:var(--ink-2)}
.now__extra{margin:4px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink-2)}

/* =============================================== ответы шагов цепочки
   Тег «приглушённый» — это не украшение. Вопрос модели задали, и она
   ответила «нет»; отсутствие тега значит, что вопрос не задавали вовсе.
   Разница нужна глазом, иначе по журналу не понять, ошиблась модель или
   её просто не спросили. */
.facts{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0}
.fact{display:inline-flex;align-items:baseline;gap:6px;
      padding:5px 10px;border-radius:999px;font-size:12.5px;
      border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.fact b{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
        text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.fact--warn{border-color:rgba(250,178,25,.38);background:rgba(250,178,25,.09);
            color:#F3C765}
.fact--warn b{color:rgba(243,199,101,.7)}
.fact--bad{border-color:rgba(208,59,59,.45);background:rgba(208,59,59,.11);
           color:#F0908C}
.fact--bad b{color:rgba(240,144,140,.7)}
.fact--off{opacity:.5}

/* Почему выставлен уровень. Это вывод кода по ответам шагов, а не слова
   модели, — поэтому отдельной строкой, а не среди улик.

   Имя с приставкой entry__ взято не для красоты. Журнал грузит и style.css
   главной страницы, а там .why — экран «Почему BeKavod» во всю высоту окна
   (min-height до 940px, display:flex). Короткое имя совпало, и строка
   «Почему тревога» раздувалась в пустой блок на пол-экрана. */
.entry__why{margin:12px 0 0;padding:9px 12px;border-radius:9px;font-size:13.5px;
     line-height:1.45;background:var(--surface-2);border:1px solid var(--line);
     color:var(--ink-2)}
.entry__why b{color:var(--ink-2)}
.entry__why--warn{background:rgba(250,178,25,.07);border-color:rgba(250,178,25,.28);
           color:var(--ink)}
.entry__why--warn b{color:#F3C765}

/* Полный разбор. Свёрнут: в ленте он не нужен, а при разметке нужен весь.

   Приставка qa__ (question/answer), а не chain/step: журнал грузит и
   fault.css, а там .chain и .step — совсем другая вещь, лента проверок
   связи с вертикальным проводом. Имена совпали, fault.css подключён
   последним и выигрывал: разбор уезжал вправо на 34px под чужой провод,
   а строки шагов теряли отступы. */
.qa{margin:14px 0 0}
.qa>summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:6px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);
  list-style:none;user-select:none}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::before{content:"▸";font-size:10px;color:var(--ink-3)}
.qa[open]>summary::before{content:"▾"}
.qa>summary:hover{color:var(--ink);border-color:var(--line-strong)}
.qa__n{font-family:var(--mono);font-size:11px;padding:1px 7px;
  border-radius:999px;background:rgba(240,168,104,.14);color:var(--accent)}
/* Служебная сводка разбора: маршрут, поза, отметки шагов, действие — одной
   строкой, как её сложил сервер. В ленте она не нужна (там человеческая
   фраза), а при разметке нужна целиком — поэтому живёт под раскрытием. */
.qa__sum{margin:10px 0 0;padding:8px 10px;border-radius:8px;
  font-family:var(--mono);font-size:12px;line-height:1.5;
  color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);overflow-wrap:anywhere}

.qa__list{margin:10px 0 0;padding:0 0 0 2px;list-style:none;
  display:grid;gap:2px}
/* Три колонки: о чём спросили | что ответила | сколько это стоило. Раньше
   времени колонки не было — его загоняли во вторую и подтягивали
   margin-top:-18px. Пока ответ был в одну строку, это сходило с рук; на
   двух строках время уезжало под ответ и рвало ряд. */
.qa__row{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;
      gap:4px 14px;padding:8px 10px;border-radius:8px;
      font-size:13px;line-height:1.4;background:var(--surface-2)}
.qa__row:nth-child(odd){background:transparent}
.qa__row>b{grid-column:1;grid-row:1;font-weight:600;color:var(--ink)}
.qa__cost{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap;
         font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.qa__ans{grid-column:2;grid-row:1;color:var(--ink-2)}
.qa__note{grid-column:2/-1;font-size:12px;color:var(--ink-3);font-style:italic}
.qa__row--fail{color:#F0908C}
.qa__row--fail .qa__cost{color:rgba(240,144,140,.7)}

@media (max-width:640px){
  .now{grid-template-columns:76px 1fr;gap:12px;padding:12px}
  .now__line{font-size:17px}
  .qa__row{grid-template-columns:1fr;gap:2px}
  .qa__ans,.qa__cost,.qa__note{grid-column:1}
  .qa__ans{grid-row:auto}
  .qa__cost{grid-row:auto;justify-self:start}
}

/* ------------------------------------------------------------------ оценка */
.acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
      margin-block-start:16px}
.vote{display:flex;gap:10px}
.vote__b{display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;font:inherit;font-size:13.5px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:9px;cursor:pointer;transition:.15s}
.vote__b svg{width:15px;height:15px;fill:currentColor}
.vote__b:hover{color:var(--ink);border-color:rgba(245,240,232,.3)}
.vote__b[data-vote="1"][aria-pressed="true"]{
  color:#8FC98F;border-color:rgba(12,163,12,.5);background:rgba(12,163,12,.12)}
.vote__b[data-vote="-1"][aria-pressed="true"]{
  color:#F0908C;border-color:rgba(208,59,59,.5);background:rgba(208,59,59,.12)}

/* Переоценка — действие, а не мнение, поэтому отделена чертой и
   выглядит иначе, чем пальцы. */
.redo{display:inline-flex;align-items:center;gap:8px;
  margin-inline-start:6px;padding:9px 14px;font:inherit;font-size:13.5px;
  color:var(--ink-2);background:none;border:1px dashed var(--line-strong);
  border-radius:9px;cursor:pointer;transition:.15s}
.redo svg{width:15px;height:15px}
.redo:hover:not(:disabled){color:var(--accent);border-color:rgba(240,168,104,.5)}
.redo:disabled{cursor:default;color:var(--accent);
  border-style:solid;border-color:rgba(240,168,104,.35);
  background:rgba(240,168,104,.08)}

.tag-redo{padding:4px 10px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--accent);background:rgba(240,168,104,.12);
  border:1px solid rgba(240,168,104,.35)}

/* Удаление. Кнопка приглушена и краснеет только при наведении: она
   рядом с оценками, а промахнуться тут дороже, чем где-либо. */
.del{display:inline-flex;align-items:center;gap:8px;
  margin-inline-start:auto;padding:9px 13px;font:inherit;font-size:13.5px;
  color:var(--ink-3);background:none;border:1px solid transparent;
  border-radius:9px;cursor:pointer;transition:.15s}
.del svg{width:15px;height:15px}
.del:hover{color:#F0908C;border-color:rgba(208,59,59,.4);
           background:rgba(208,59,59,.10)}

.confirm{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-block-start:16px;padding:14px 16px;border-radius:11px;
  background:rgba(208,59,59,.09);border:1px solid rgba(208,59,59,.35)}
.confirm__t{margin:0;font-size:14.5px;line-height:1.45;color:#F3B3B0}
.confirm__go{display:flex;gap:10px;margin-inline-start:auto}
.entry.is-confirming .acts{display:none}
.entry.is-confirming .entry__in{border-color:rgba(208,59,59,.4)}

.btn--danger{background:#C4413C;color:#FFF3F2;font-weight:550;border-color:#C4413C}
.btn--danger:hover{background:#D64F4A;border-color:#D64F4A}

/* Полоса отмены. Прижата к низу экрана, чтобы не прыгала вместе с лентой. */
.toast{position:fixed;inset-block-end:24px;inset-inline-start:50%;
  translate:-50% 0;z-index:40;
  display:flex;align-items:center;gap:18px;
  padding:14px 20px;border-radius:12px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line-strong);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  font-size:14.5px;color:var(--ink)}
.toast__undo{padding:6px 12px;font:inherit;font-size:14px;font-weight:600;
  color:var(--accent);background:none;border:1px solid rgba(240,168,104,.45);
  border-radius:8px;cursor:pointer}
.toast__undo:hover{background:rgba(240,168,104,.12)}
/* Полоска показывает, сколько осталось до момента, когда вернуть нельзя */
.toast__bar{position:absolute;inset-block-end:0;inset-inline-start:0;
  height:2px;width:100%;background:var(--accent);transform-origin:left}
.toast.is-out .toast__bar{animation:toastbar var(--life,10s) linear forwards}
@keyframes toastbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ------------------------------------------------------------- подгрузка */
.more{margin-block-start:clamp(26px,4vh,40px);text-align:center}
.more__end{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.empty{margin-block-start:36px;text-align:center;color:var(--ink-2)}

/* ------------------------------------------------------------ окно входа */
.auth{padding:0;border:0;background:none;color:var(--ink);max-width:min(440px,92vw)}
.auth::backdrop{background:rgba(8,7,6,.72);backdrop-filter:blur(6px)}
.auth__box{position:relative;padding:32px 30px 26px;
  border:1px solid var(--line-strong);border-radius:18px;
  background:var(--surface);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.auth__x{position:absolute;inset-block-start:12px;inset-inline-end:14px;
  width:34px;height:34px;font-size:22px;line-height:1;
  color:var(--ink-3);background:none;border:0;border-radius:8px;cursor:pointer}
.auth__x:hover{color:var(--ink);background:var(--surface-2)}
.auth__box h2{margin:14px 0 0;font-size:25px;line-height:1.16;
              font-weight:600;letter-spacing:-.02em}
.auth__lead{margin:12px 0 22px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.auth__box .fld + .fld{margin-block-start:14px}
.auth__err{margin:14px 0 0;padding:10px 12px;border-radius:8px;
  background:rgba(208,59,59,.14);border:1px solid rgba(208,59,59,.4);
  font-size:14px;color:#F0908C}
.auth__go{display:flex;gap:10px;margin-block-start:22px}
.auth__note{margin:18px 0 0;padding-block-start:16px;
  border-block-start:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--ink-3)}

/* --------------------------------------------------------------- футер */
.foot--slim{margin-block-start:0;padding-block:22px}
.foot--slim .foot__bot{margin:0;padding:0;border:0}
.foot--slim a{color:var(--ink-2);text-decoration:none}
.foot--slim a:hover{color:var(--accent)}

/* --------------------------------------------------------------- адаптив */
@media (max-width:820px){
  .topbar__in{gap:14px}
  .topbar__nav{order:3;width:100%;margin-inline-start:0;gap:18px}
  .topbar__auth{margin-inline-start:auto}
  .lockbar{grid-template-columns:auto 1fr;gap:14px}
  .lockbar .btn{grid-column:1 / -1;justify-self:start}
  .entry__in{grid-template-columns:1fr;gap:16px}
  .entry__media{aspect-ratio:16/9}
}
@media (max-width:560px){
  .filters{padding:16px}
  .filters__row{gap:12px}
  .fld--grow{flex-basis:100%}
  .fld{flex:1 1 calc(50% - 6px)}
  .vote{flex-wrap:wrap}
  .del{margin-inline-start:0}
  .confirm__go{margin-inline-start:0;width:100%}
  .toast{inset-inline:16px;translate:0 0;justify-content:space-between}
  .auth__box{padding:26px 20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .chip,.vote__b,.btn{transition:none}
  .dur--live i{animation:none}
  .toast.is-out .toast__bar{animation:none}
}