/* ==========================================================================
   Стрічка спільноти (просьба замовника 2 листопада 2026)
   ==========================================================================

   Окремий файл, а не доповнення до styles.css, і причина та сама, що в
   messages.css: styles.css — це затверджений макет, у ньому чотири пари
   правил, де специфічність однакова й вирішує порядок. Екрани, яких у
   макеті не було, підключають свій файл ПІСЛЯ нього ($extraCss).

   Піксельного еталона в цієї сторінки немає ЗОВСІМ: у замороженому mock/
   стрічки не існує. Тому вона зібрана не «на око», а за DESIGN.md —
   нових поверхонь, кольорів і гарнітур не вводимо:

   • глибина — лише --lift і --sink (правило двох тіней);
   • межі — лише --edge / --edge-bright, інших немає;
   • службовий напис — капітель Roboto Condensed від 11px із трекінгом,
     який РОСТЕ зі зменшенням кегля;
   • наведення відповідає РУХОМ, а не самим кольором (-1px кнопці,
     -3px картці), і єдиною кривою --ease;
   • будь-яке змінне число — tabular-nums;
   • анімованому об'єкту обов'язковий статичний вигляд під
     prefers-reduced-motion.

   Один акцент системи використаний тут двічі свідомо: волосинка під
   заголовком композера (той самий прийом, що в .pane__head) і підпис
   «показати всі». Решта — крем трьох рівнів поверх графіту.
   ========================================================================== */

/* --- Потік ------------------------------------------------------------ */
/* Одна колонка по центру оболонки: стрічку читають згори вниз, і друга
   колонка (як у каталозі з оголошеннями) тут нічого не несе. Ширина
   обмежена 720px — на цільовій 1440 це ~86 знаків у рядку, тобто близько
   до межі читабельності, яку check-layout вважає нормою (78). */
.feed{
  display:flex;flex-direction:column;
  gap:clamp(20px,2.4vw,30px);
  max-width:720px;margin-inline:auto;
}
.feed__list{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.feed__more{align-self:center;min-width:220px;justify-content:center}
.feed__back{margin-bottom:clamp(16px,2vw,24px)}

/* --- Плашка про новий розділ (тимчасова) -------------------------------- */
/* Вигляд цілком від .note зі styles.css — це готова врізка системи, і
   своєї поверхні плашці не треба. Тут лишається рівно ширина: та сама
   720px, що в смуги фільтрів і потоку, інакше вітання читалося б ширше
   за колонку, у якій іде вся сторінка. Відбивка знизу теж та сама, що в
   смуги, — плашка стоїть у тому ж вертикальному ритмі.

   Знімається разом із блоком у pages/feed.blade.php. */
.feed__intro{max-width:720px;margin:0 auto clamp(20px,2.4vw,30px)}
/* Кнопка «Зрозуміло» (4 листопада 2026). Форма, а не сама кнопка, бо
   ховає плашку звичайний POST. Стоїть при лівому краї тексту й на
   телефоні НЕ розтягується на всю ширину: це тиха дія «прочитав», а не
   головна дія екрана — такою тут лишається «Опублікувати». Відбивка
   більша за 7px між абзацами врізки: кнопка мусить читатися як окремий
   крок, а не як наступний рядок тексту. */
.feed__intro-ok{margin-top:9px}

/* --- Фільтр ------------------------------------------------------------ */
/* Обгортка .hunt тут потрібна заради смуги «Фільтри»: правило згортання
   форми написане саме на неї. А от МАЛЮНОК за консоллю гасимо — у
   каталозі він лежить за формою пошуку й там доречний, а в стрічці
   розтікався б під потоком публікацій і заважав читати. */
.hunt--feed::before,
.hunt--feed::after{content:none}
/* Відступ під формою — свій: у каталозі під консоллю йде заголовок
   результатів і сайдбар, і там правило дає clamp(44px,6vh,76px). У
   стрічці одразу під фільтром стоїть композер, і така прірва між ними
   читалася б як розрив сторінки. */
.hunt--feed{isolation:auto}
.roster .shell > .hunt--feed{margin-bottom:0}

/* Смуга «Фільтри» СТОЇТЬ НА ВСІХ ШИРИНАХ, а форма згорнута за
   замовчуванням (просьба замовника 2 листопада 2026). У каталозі
   навпаки: там на 1440 форма пошуку розкрита, бо вона й є головна дія
   сторінки. У стрічці головне — потік, а два поля фільтра над ним
   щоразу відтісняли б першу публікацію на другий екран.

   Вигляд смуги описаний у styles.css ОДИН раз — там же з 4 листопада
   2026 лежать і сам вмикач (`.hunt__bar--always{display:flex}`), і
   згортання форми: смугу того дня отримали й каталоги, тож правило
   стало спільним. Тут лишається рівно ширина й відступ.

   Ширина та сама, що в потоку (720px): смуга, форма й публікації мусять
   читатися однією колонкою. Відступ свій і менший за каталожний: під
   фільтром у стрічці стоїть композер, а не заголовок результатів.

   Вішається на ОКРЕМИЙ модифікатор --narrow, а не на --always, і це не
   педантизм: з 4 листопада 2026 feed.css підключений і в каталогах
   (заради блоку «Дописи у стрічці» в сайдбарі), а там смуга стоїть на
   всю оболонку — над формою пошуку такої ж ширини. Повісиш ширину на
   --always, і в каталозі смуга з'їдеться до 720px. */
.hunt__bar--narrow{max-width:720px;margin:0 auto clamp(20px,2.4vw,30px)}
/* Консоль та сама, що в каталозі, але без малюнка за нею: у стрічці він
   розтікався б під потоком. Поля стоять у рядок і тиснуться вліво —
   їх два, і розтягнуті на всю оболонку вони виглядали б як форма
   пошуку, якою стрічка не є. */
/* Ширина та сама, що в потоку: фільтр і стрічка мусять читатися як ОДНА
   колонка. Розтягнутий на всю оболонку, він виглядав би формою пошуку,
   до якої потік не має стосунку. */
.feed__console{
  max-width:720px;margin:0 auto clamp(20px,2.4vw,30px);
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
}
.feed__console-row{
  display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;
}
/* Два поля й кнопка мусять стояти В ОДИН рядок: у 720px (ширина потоку)
   вони вміщаються, а перенесена кнопка читалася б як окрема дія. */
.feed__console-row .field{flex:1 1 180px;min-width:0}
.feed__console-go{flex:none;align-self:flex-end}
/* Заголовок стрічки однієї людини. */
.feed__who{
  margin:0 0 clamp(16px,2vw,22px);
  font:400 1.45rem/1.2 var(--display);letter-spacing:-.012em;color:var(--cream);
}
.feed__who a{color:var(--brass);text-decoration:none}
.feed__who a:hover{text-decoration:underline}

/* --- Композер ---------------------------------------------------------- */
/* Поверхня та сама, що в картки поста, але композер мусить читатися як
   ПРИЛАД, а не як чужий пост: звідси капітель заголовка з волосинкою
   (рецепт .pane__head) і врізане поле .ctrl--area всередині піднятої
   плоскости — пара --lift зовні / --sink усередині. */
.composer{
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(18px,2.2vw,26px);
  background:var(--panel);box-shadow:var(--lift);
}
.composer__head{
  position:relative;display:flex;align-items:center;gap:12px;
  margin:0;
  font:500 11px/1 var(--label);letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass);
}
/* Волосинка до правого краю — той самий прийом, що в заголовка панелі
   анкети: заголовок не стоїть сам по собі, він відкриває блок. */
.composer__head::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgb(var(--brass-rgb) / .34),transparent);
}

/* Сама форма — стовпчик із зазором (правка 3 листопада 2026). Доти в неї
   не було розкладки зовсім, і діти йшли потоком без полів: вибрані кадри
   прилипали до текстового поля, а коли кадрів немає — до поля прилипала
   кнопка «Опублікувати». Замовник попросив розвести. */
.composer__box{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,18px)}
.composer__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.composer__ava{--ava-size:46px;flex:none}
.composer__field{min-width:0}
.composer__text{width:100%;min-height:86px;resize:vertical}

/* Вибрані кадри ДО публікації: людина бачить, що саме піде в пост. */
.composer__tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px;margin:0;padding:0;list-style:none;
}
.composer__tile{
  position:relative;aspect-ratio:1;overflow:hidden;
  border:1px solid var(--edge);background:#0d0d0e;
}
.composer__tile img{width:100%;height:100%;object-fit:cover;display:block}
/* Хрестик на кадрі — гола іконка на затемненні, без плашки. */
.composer__drop-one{
  position:absolute;top:5px;right:5px;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;
  border:none;border-radius:50%;background:rgb(9 9 10 / .74);
  color:var(--cream-soft);cursor:pointer;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.composer__drop-one:hover{color:var(--cream);background:rgb(9 9 10 / .9)}
.composer__drop-one svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.composer__bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Кнопка «Фото» — тиха, у манері дій шапки: голий контур і капітель.
   Прозорий <input type=file> лежить зверху, тому перетягування працює
   саме собою, без жодного JS (рецепт .drop із галереї). */
.composer__pick{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border:1px solid var(--edge-bright);
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:var(--cream-soft);cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.composer__pick:hover{color:var(--brass);border-color:rgb(var(--brass-rgb) / .5);transform:translateY(-1px)}
.composer__pick.is-busy{opacity:.5;pointer-events:none}
.composer__pick svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.composer__input{position:absolute;inset:0;opacity:0;cursor:pointer}
.composer__input:disabled{cursor:default}

/* Підказка посередині смуги: вона ж місце для помилки поля. Постійного
   тексту в ній більше немає — «До 10 фото, JPEG, PNG або WebP» замовник
   зняв 3 листопада 2026. Лишилися тільки помилки й залишок добового
   ліміту, тобто рядок, який справді щось повідомляє. */
.composer__hint{
  flex:1;min-width:120px;margin:0;
  font:400 11px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,239,233,.52);font-variant-numeric:tabular-nums;
}
.composer__hint .field__err{letter-spacing:.04em;text-transform:none;font-size:13px}
.composer__send{margin-left:auto}
.composer__fix{margin-top:10px;align-self:flex-start}

.composer__wait{display:flex;flex-direction:column;gap:7px}
/* Підсумок публікації — тихий рядок, а не врізка: він про дрібницю
   («кадрів узяли менше»), і врізка кричала б. */
.composer__flash{
  margin:0;font:400 13px/1.45 var(--body);color:var(--cream-dim);
}
.composer--locked{gap:14px}

/* --- Публікація -------------------------------------------------------- */
.post{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(18px,2.2vw,26px);
  border:1px solid transparent;background:var(--panel);box-shadow:var(--lift);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
/* Відповідь на наведення — ледь помітний контур і трохи глибша тінь.
   Картку НЕ піднімаємо: у каталозі -3px має рядок, який ведеться
   посиланням цілком, а пост не веде нікуди сам по собі. */
.post:hover{border-color:rgb(var(--brass-rgb) / .18)}
.post--gold .ava{
  box-shadow:0 0 0 1px rgb(var(--gold-rgb) / .5),0 0 0 5px rgb(var(--gold-rgb) / .1),inset 0 2px 6px rgba(0,0,0,.8);
}
.post--blocked{opacity:.78}

.post__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.post__ava{--ava-size:52px}
.post__who{display:flex;flex-direction:column;gap:5px;min-width:0}
.post__id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;margin:0}
/* Ім'я — той самий кегль, що в рядку каталогу (.rost__name 1.32rem). */
.post__name{
  font:400 1.18rem/1.2 var(--display);letter-spacing:-.01em;
  color:var(--cream);text-decoration:none;
  transition:color .25s var(--ease);
}
.post__name:hover{color:var(--brass)}
.post--gold .post__name{color:rgb(var(--gold-rgb))}
/* Бейдж «у мережі» — та сама пігулка, що в рядку каталогу й на візитці.
   Її правило в styles.css написане переліком селекторів
   (.rost__live,.prof__live), тому третьому місцю треба дописати себе:
   без цього значок і підпис розсипаються в стовпчик. */
.post__live{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px calc(8px - .16em) 4px 8px;border:1px solid rgb(var(--brass-rgb) / .5);
  font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.post__live svg{
  width:13px;height:13px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.post__live circle{fill:currentColor;stroke:none}
/* Час — тиха капітель, трекінг більший, бо кегль менший. */
.post__when{margin:0}
.post__when a{
  font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,239,233,.5);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .25s var(--ease);
}
.post__when a:hover{color:var(--brass)}

/* Кнопка «видалити своє» — гола іконка, як дії в шапці сайту. Проявляється
   на наведенні картки, щоб не висіти хрестиком над кожним постом; на
   дотику видима завжди — там наведення не буває. */
.post__kill,.cmt__kill{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;padding:0;
  border:none;border-radius:50%;background:none;cursor:pointer;
  color:rgba(242,239,233,.34);opacity:0;
  transition:color .22s var(--ease),opacity .22s var(--ease);
}
.post:hover .post__kill,.post__kill:focus-visible,
.cmt:hover .cmt__kill,.cmt__kill:focus-visible{opacity:1}
.post__kill:hover,.cmt__kill:hover{color:rgb(var(--brass-rgb))}
.post__kill svg,.cmt__kill svg{
  width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.post__kill[disabled],.cmt__kill[disabled]{opacity:.3;pointer-events:none}
@media (hover:none){
  .post__kill,.cmt__kill{opacity:1}
}

.post__text{gap:12px}
.post__text p{font:400 16px/1.62 var(--body);color:var(--cream-soft);margin:0;overflow-wrap:anywhere}

/* --- Кадри публікації -------------------------------------------------- */
/* Розкладка залежить від числа кадрів: одна фотографія великою, дві-три в
   ряд, чотири — квадратом 2×2, більше — трійками. Інакше єдина світлина
   виглядала б випадковою мініатюрою.

   Чотири кадри САМЕ 2×2, а не в один ряд (правка 2 листопада 2026, коли
   замовник попросив показати приклади публікацій із фото): у колонці
   720px ряд із чотирьох дає плитку 168px — на ній уже не видно, що
   знято. Квадрат дає 352px, тобто вдвічі. З тієї ж причини пʼять і
   більше йдуть трійками: ряд із чотирьох плюс «хвіст» із двох читався
   як збита сітка.

   Класи --1…--4 і --many, а не min(count,4): рівно чотири кадри й шість
   кадрів — РІЗНІ розкладки, і спільний клас їх не розрізняв. */
.post__shots{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.post__shots--1{grid-template-columns:minmax(0,1fr)}
.post__shots--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.post__shots--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.post__shots--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.post__shots--many{grid-template-columns:repeat(3,minmax(0,1fr))}
.post__shot{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--edge);background:#0d0d0e;
}
.post__shots--1 .post__shot{aspect-ratio:3/2}
.post__shots--2 .post__shot,
.post__shots--3 .post__shot,
.post__shots--4 .post__shot,
.post__shots--many .post__shot{aspect-ratio:1}
/* Живе фото: ні інверсії, ні змішування — те саме правило, що для фото
   анкет і вкладень чату. Під курсором кадр наближається, як плитка
   події (там 1.045 за 0.6s). */
.post__shot img{
  width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;
  transition:transform .6s var(--ease);
}
.post__shot img:hover{transform:scale(1.045)}

/* --- Підвал публікації ------------------------------------------------- */
.post__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.post__cmts{
  display:inline-flex;align-items:center;gap:8px;
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,239,233,.58);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .25s var(--ease);
}
.post__cmts:hover{color:var(--brass)}
.post__cmts:hover svg{transform:translateY(-1px)}
.post__cmts svg{
  width:15px;height:15px;flex:none;fill:none;stroke:var(--brass);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease);
}

/* --- Коментарі --------------------------------------------------------- */
/* Коментарі живуть УСЕРЕДИНІ картки поста: це продовження того самого
   предмета. Відокремлює їх волосинка й відступ, а не нова площина —
   дві поверхні поспіль давали шов, у якому пост і розмова читалися як
   дві різні картки. Волосинка відбита від країв картки, як роздільник
   дня в чаті: вона ділить вміст, а не ріже саму картку. */
.cmts{
  display:flex;flex-direction:column;gap:12px;
  margin-top:4px;padding-top:16px;
  border-top:1px solid var(--edge);
}
.cmts__list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
/* Панель «Завантажити ще» — СМУГА на всю ширину розмови, а не кнопка в
   рядок: вона відкриває те, що під нею, і мусить читатися як кришка
   розмови. Тому дно врізане (--sink у піднятій картці — та сама пара, що
   в полі композера), підпис службовою капітеллю, і ніякої плашки:
   головні дії картки — публікація й «Надіслати», третя світла кнопка
   посеред неї перебила б обидві.
   Стрілка вниз, а не вгору: нові коментарі приходять знизу, а панель
   дістає СТАРІШІ — рух погляду в неї теж униз, по сторінці. */
.cmts__load{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:11px 14px;
  border:1px solid var(--edge);background:transparent;cursor:pointer;
  font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,239,233,.62);font-variant-numeric:tabular-nums;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.cmts__load:hover{color:var(--brass);border-color:rgb(var(--brass-rgb) / .42);background:rgb(var(--brass-rgb) / .05)}
.cmts__load svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s var(--ease);
}
.cmts__load:hover svg{transform:translateY(2px)}
.cmts__load[disabled]{opacity:.5;pointer-events:none}

.cmt__box{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:11px}
.cmt__ava{--ava-size:34px}
/* Балон той самий, що репліка в чаті: дно --balloon, контур, радіус 14px
   і хвостик-ромб — тільки хвостик тут збоку, бо аватар стоїть ліворуч. */
.cmt__body{
  position:relative;min-width:0;
  padding:9px 14px 10px;border:1px solid var(--edge);border-radius:14px;background:var(--balloon);
}
.cmt__body::after{
  content:"";position:absolute;left:-6px;top:14px;width:11px;height:11px;
  transform:rotate(45deg);background:var(--balloon);
  border-left:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
.cmt__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.cmt__name{font:400 14px/1.2 var(--display);color:var(--cream);text-decoration:none;transition:color .22s var(--ease)}
.cmt__name:hover{color:var(--brass)}
.cmt__when{
  font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,239,233,.4);font-variant-numeric:tabular-nums;
}
/* Голос людини — Fira 300, як репліка в балоні анкети. Курсиву тут
   немає: у стрічці це не цитата, а розмова. */
.cmt__text{margin:0;font:300 15px/1.55 var(--body);color:rgba(242,239,233,.9);overflow-wrap:anywhere}

/* --- Форма коментаря ---------------------------------------------------- */
.cmt__form{display:flex;flex-direction:column;gap:9px;margin-top:2px}
/* Поле — В ОДИН РЯДОК, поки в нього не стали писати.
   Причина не косметична: форма стоїть під КОЖНИМ постом, і розгорнуте
   поле на три рядки розтягувало б потік удвічі — між двома постами
   виявлялося б більше порожнечі, ніж тексту. По фокусу поле виростає
   само, чистим CSS, без жодного рядка JS. */
.cmt__field{min-height:44px;height:44px;padding-block:12px;resize:none}
/* Росте від :focus-within ФОРМИ, а не від :focus самого поля (правка
   2 листопада 2026). Причина — кнопка смайликів: клік по ній забирає
   фокус із textarea, і при старому правилі поле згорталося б просто під
   рукою, разом із панеллю емодзі над ним. */
.cmt__form:focus-within .cmt__field{min-height:96px;height:96px;resize:vertical}
/* Зростання БЕЗ переходу, і це правило системи, а не економія: анімація
   висоти переводить браузер у перерахунок розкладки на кожен кадр, а
   полів тут до десятка на екран — по одному під кожним постом. Той
   самий вибір уже зроблений у проєкті двічі: панель вподобань і випадний
   список селектора не анімуються зовсім, а анімацію висоти 340ms зняли
   разом з акордеоном. */
/* Кнопка з'являється разом із розгорнутим полем: поки писати не почали,
   під постом стоїть лише тонкий рядок запрошення. */
.cmt__form:not(:focus-within) .cmt__bar{display:none}
.cmt__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cmt__bar .field__err{margin:0}
.cmt__send{margin-left:auto}
/* Заглушка замість форми: блок, неперевірена анкета або заборона писати. */
.cmt__notice{margin:0}

/* --- Кнопка-інструмент (смайлики) --------------------------------------- */
/* Гола іконка в манері дій шапки сайту й інструментів чату: ні плашки, ні
   контуру — вона стоїть поруч із діями, які вже мають свій вигляд
   («Фото» в композері, «Надіслати» під коментарем), і друга рамка в
   рядку читалася б як друга головна дія.

   .feed__emoji тримає прив'язку спливної панелі: сама панель (.emo)
   абсолютна й рахується від цього контейнера, вигляд її — у
   public/css/emoji.css. Зсуву по горизонталі тут немає (--emo-shift не
   заданий, тобто 0): ліворуч від кнопки в стрічці нічого не стоїть. */
.feed__emoji{position:relative;flex:none;display:inline-flex}
.feed__tool{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;
  border:none;background:none;cursor:pointer;
  color:rgba(242,239,233,.52);
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.feed__tool:hover{color:var(--brass);transform:translateY(-1px)}
.feed__tool svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* У композері кнопка стоїть одразу за «Фото», тому зазор рядка їй
   завеликий: смуга інакше читається як три окремі дії, а не як пара
   інструментів плюс кнопка публікації. */
.composer__bar .feed__emoji{margin-left:-6px}

/* --- Стрічка учасника в профілі ----------------------------------------- */
/* Панель на сторінці /u/{id}: три останні пости стислим рядком. Тут не
   картка, а ВИТЯГ — тому ні своєї поверхні, ні аватара автора (він і так
   на цій сторінці), лише дата, текст, кілька кадрів і число коментарів.
   Розділені волосинкою, як клітини фактів у візитці. */
.prof__feed-all{
  display:inline-flex;align-items:center;gap:7px;
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:var(--brass);text-decoration:none;transition:color .22s var(--ease);
}
.prof__feed-all:hover{color:var(--brass-light)}
.prof__feed-all:hover svg{transform:translateX(2px)}
.prof__feed-all svg{
  width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s var(--ease);
}
/* Композер на анкеті: кнопка, під нею — форма (просьба замовника
   3 листопада 2026). Блок стоїть між заголовком панелі й записами, тому
   відбивається з обох боків; кнопка на всю ширину — вона тут не «ще одна
   дія в рядку», а вхід у публікацію. */
.feed__new{display:flex;flex-direction:column;gap:12px;margin-top:16px}
/* ЗАКРИТА кнопка — на всю ширину: це вхід у дію, і вузька пілюля посеред
   довгої сторінки анкети губилася б між текстами. */
.feed__new-btn{width:100%;justify-content:center}
/* РОЗКРИТА — тиха й компактна, притиснута вправо: головне тепер сама
   форма, і друга широка кнопка над нею сперечалася б із «Опублікувати». */
.feed__new-btn.is-open{
  width:auto;align-self:flex-end;padding:7px 12px;
  border-color:transparent;color:rgba(242,239,233,.52);
}
.feed__new-btn.is-open:hover{color:var(--brass);border-color:rgb(var(--brass-rgb) / .4)}
.feed__new-btn svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
/* Волосинка між композером і першим записом: без неї форма й перший пост
   зливаються в одну стопку, бо перший запис навмисно без верхньої межі
   (він перший у списку). */
.feed__new + .prof__feed-list .post--slim:first-child{
  border-top:1px solid var(--edge);padding-top:16px;
}

.prof__feed-list{display:flex;flex-direction:column;margin:16px 0 0;padding:0;list-style:none}
.post--slim{
  display:flex;flex-direction:column;gap:9px;
  padding:16px 0;border-top:1px solid var(--edge);
}
.post--slim:first-child{border-top:0;padding-top:0}
.post--slim:last-child{padding-bottom:0}
/* Знятий модератором пост власник бачить і тут — приглушеним. */
.post--slim-off{opacity:.6}
.post--slim__when{margin:0}
.post--slim__when a{
  font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,239,233,.5);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .22s var(--ease);
}
.post--slim__when a:hover{color:var(--brass)}
.post--slim__text{margin:0;font:400 15px/1.55 var(--body);color:var(--cream-soft)}
.post--slim__cmts{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,239,233,.58);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .22s var(--ease);
}
.post--slim__cmts:hover{color:var(--brass)}
.post--slim__cmts svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* --- «Дописи у стрічці» в сайдбарі каталогів ---------------------------- */
/* Блок над найближчими подіями на /community і /bdsm (просьба замовника
   4 листопада 2026). Він живе на сторінці ПОШУКУ, а не у стрічці, але
   правила його тут: це картка публікації, і всі такі картки лежать в
   одному файлі — інакше правити доведеться у двох.

   Поверхня дослівно та сама, що в оголошення поруч (.ad у styles.css):
   контур --edge, підкладка --panel, тінь --lift, той самий відгук на
   наведення. Нової поверхні блок не вводить — у вузькій колонці дві
   різні картки про сусідні речі читалися б як збій.

   Заголовок спільний із сайдбаром оголошень (.promo__head), зазор між
   картками той самий 13px, і кнопка внизу — .promo__cta. Тому в
   колонці .side три блоки стоять одним ритмом. */
.picks{display:flex;flex-direction:column;gap:13px}
.pick{
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:11px;
  padding:13px 14px 14px;border:1px solid var(--edge);background:var(--panel);box-shadow:var(--lift);
  transition:border-color .3s var(--ease);
}
.pick:hover{border-color:rgb(var(--brass-rgb) / .38)}
.pick__who{display:flex;align-items:center;gap:9px;min-width:0}
/* 34px, а не 40 як в оголошення: тут під автором іде ще й кадр, і висота
   картки в колонці 231px рахується вже не на око */
.pick .ava{--ava-size:34px}
.pick__id{display:flex;flex-direction:column;gap:3px;min-width:0}
/* Уся картка клікабельна — звідси isolation вище. Веде на сторінку поста:
   у нього вона є, на відміну від оголошення, яке живе в сайдбарі й ніде
   більше */
.pick__name{
  font-family:var(--display);font-size:.98rem;line-height:1.2;
  color:var(--cream);text-decoration:none;transition:color .25s var(--ease);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick__name::after{content:"";position:absolute;inset:0;z-index:3}
.pick__name:focus-visible{outline:none}
.pick__name:focus-visible::after{outline:2px solid var(--signal);outline-offset:3px}
.pick:hover .pick__name{color:var(--brass-light)}
.pick__when{
  font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,239,233,.5);font-variant-numeric:tabular-nums;
}
/* Gold-автор: ім'я золоте — те саме, що в рядку анкети й в оголошенні */
.pick--gold .pick__name{color:var(--gold)}
.pick--gold:hover .pick__name{color:var(--gold-light)}
/* Кадр один і на всю ширину колонки. 3/2, як у звуженої плитки події під
   блоком: у колонці ~231px квадрат з'їдав би 231px висоти на кожну
   картку, і події поїхали б за край екрана */
.pick__shot{
  position:relative;overflow:hidden;aspect-ratio:3/2;
  border:1px solid var(--edge);background:#0d0d0e;
}
.pick__shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pick:hover .pick__shot img{transform:scale(1.045)}
/* Скільки кадрів ще під першим. Мітка, а не галерея: лайтбокса в каталозі
   немає, і картка веде на сторінку поста, де видно всі */
.pick__more{
  position:absolute;right:7px;bottom:7px;z-index:2;padding:3px 7px;
  font:500 11px/1 var(--label);letter-spacing:.1em;color:var(--cream);
  background:rgba(18,18,18,.74);border:1px solid var(--edge-bright);
  font-variant-numeric:tabular-nums;
}
/* Текст обрізає і Str::limit (120 символів), і клампа: перше не знає про
   ширину колонки, друге — про довжину слів */
.pick__text{
  margin:0;font:300 13.5px/1.52 var(--body);color:var(--cream-soft);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.pick__cmts{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,239,233,.58);font-variant-numeric:tabular-nums;
}
.pick__cmts svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* --- Плашка «Новий розділ» у сайдбарі каталогів ------------------------- */
/* Запрошення у стрічку над блоком «Дописи у стрічці» (просьба замовника
   4 листопада 2026). Текст той самий, що вітає всередині стрічки
   (.feed__intro), але там він лежить у колонці результатів, а тут — у
   сайдбарі ~231px, тож розкладка своя.
   Поверхня — затверджена утоплена тарілка .note, та сама, що в порожньому
   результаті пошуку поруч; модифікатор лише стискає її під колонку.
   Іконка їде В РЯДОК із заголовком, а не збоку від тексту, як у звичайній
   врізці: збоку вона з'їдала б 34px із 180px, що лишаються рядку, і текст
   розсипався б на два слова в строчку. */
/* Плашок може бути кілька (адмінка, 4 листопада 2026) — зазор між ними той
   самий 13px, що між картками оголошень і дописів у тій самій колонці */
.notices{display:flex;flex-direction:column;gap:13px}
.note--call{padding:14px 15px 15px}
.note--call .note__body{gap:10px}
.note--call .note__head{display:flex;align-items:center;gap:9px}
/* 16px замість 20: заголовок тут не рядок із полями, а підпис у 11px */
.note--call .note__icon{width:16px;height:16px;margin:0}
/* той самий кегль, що в тексті картки поста поруч (.pick__text): у колонці
   основний 16px читається як чужий */
.note--call .note__body p{font-size:13.5px;line-height:1.52}

/* --- Вузький екран: фільтр ---------------------------------------------- */
/* На телефоні консоль усередині .hunt лишається БЕЗ поля знизу: у каталозі
   його місце займає липкий слот кнопки пошуку (styles.css, 860px). У
   стрічці такого слота немає — кнопка «Показати» стоїть просто в рядку
   полів, тому знята відбивка впирала її в межу консолі (правка замовника
   3 листопада 2026). Поле повертаємо адресно формі стрічки: правило в
   каталозі чіпати не можна, там воно на місці. Число те саме, що у
   вертикальному полі .feed__console вище. */
@media (max-width:860px){
  .hunt--feed .console{padding-bottom:clamp(16px,2vw,22px)}
}

/* --- Вузький екран ------------------------------------------------------ */
@media (max-width:620px){
  /* Три кадри в ряд на телефоні дають плитку ~100px — у два стовпці
     фотографію видно. Чотири тут і так стоять квадратом. */
  .post__shots--3,
  .post__shots--many{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post__head{gap:11px}
  .post__ava{--ava-size:44px}
  .post__name{font-size:1.08rem}
  .composer__row{grid-template-columns:minmax(0,1fr)}
  .composer__ava{display:none}
  .composer__send,.cmt__send{width:100%;justify-content:center}
  .composer__hint{order:3;width:100%;flex:none}
  .feed__more{width:100%}
}

/* --- Статичний вигляд --------------------------------------------------- */
/* Правило системи: анімований об'єкт мусить мати вигляд без руху. */
@media (prefers-reduced-motion:reduce){
  .post__shot img:hover{transform:none}
  .pick:hover .pick__shot img{transform:none}
  .composer__pick:hover{transform:none}
  .feed__tool:hover{transform:none}
  .cmts__load:hover svg{transform:none}
  .post__cmts:hover svg{transform:none}
  .post__kill,.cmt__kill{opacity:1}
}