/* ============================================================================
   Hygge Hoodie CORE — компоненти
   ----------------------------------------------------------------------------
   Усе будується на токенах із tokens.css. Числа тут з'являються рівно там,
   де вони є частиною самої механіки компонента (наприклад, ширина смужки
   скелетона), а не там, де це колір чи ритм.

   Іменування — БЕМ-подібне без вкладеності: .hh-<блок>, .hh-<блок>__<частина>,
   модифікатор через --. Префікс потрібен, бо ця сама CSS поїде в POS, апку
   співробітника й B2B-портал, де живе чужа розмітка.
   ========================================================================= */

/* --------------------------------------------------------------------------
   0. Основа
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Колір виділення тексту — брендовий блакитний, а не системний синій. */
  accent-color: var(--accent);
  /* Будь-який випадково широкий рядок (таблиця, ряд чипів на 375px) інакше
     тягне горизонтальний скрол усієї сторінки — і в повноекранному режимі
     (без адресного рядка) fixed-панелі (.hh-tabbar) з'їжджають разом із ним
     і виглядають "порізаними" по боках. Ширина елементів усередині
     й так контролюється (overflow-x:auto на власних контейнерах), тому тут
     лише страховка на рівні документа. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* Фокус видно ЗАВЖДИ і однаково. Прибирати обведення заради краси не можна:
   клавіатурою систему проходить бухгалтер, який не відриває руки від цифр. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-w) solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   1. Типографіка
   -------------------------------------------------------------------------- */

/* ФІРМОВИЙ ШРИФТ — ЗА ТИПОМ ВМІСТУ, А НЕ ЗА РІВНЕМ ЗАГОЛОВКА.
   ---------------------------------------------------------------------------
   Neutral Face капітельний: малі літери намальовані як великі, тому будь-який
   текст ним читається капсом.

   Рівень заголовка тут ні до чого. «Замовлення» — одне слово, капсом виглядає
   добре, бренд працює. «Надходження №1042» — той самий рівень, але капсом
   читається погано, бо це дані з номером. Тому межа проходить не по h1/h2/h3,
   а по природі тексту:

   | Neutral Face (--font-display)   | Montserrat (--font-text)                |
   |---------------------------------|-----------------------------------------|
   | назви розділів: Замовлення,     | номери документів: Надходження №1042    |
   | Склад, Гроші, Команда           | імена клієнтів і контрагентів           |
   | значення показників: 128 340 ₴  | назви товарів і SKU                     |
   | слоган, екран входу             | суми в таблицях і рядках                |
   |                                 | будь-який текст, що прийшов із бази     |

   Правило одним рядком: **фірмовий шрифт — тільки для короткого й статичного,
   що написали ми. Усе, що прийшло з бази, — Montserrat.**

   Тому клас називається .hh-section-title, а не .hh-display: назва має
   зупинити руку, яка збирається поставити його на картку замовлення. */
.hh-section-title,
.hh-h1,
.hh-h2,
.hh-h3 {
  margin: 0;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}

/* Назва розділу. Статичний текст із меню — і більше нічого. */
/* Вага знята з 700 на 400 (instruction-marketing-round2.md, розділ A,
   рішення Романа 05.09.2026): «жирним і суттєво більшим розміром за
   спек» — розмір уже виправлений раніше (issue #932, коментар при
   --size-display нижче), лишалась вага. Клас глобальний — заголовок
   сторінки скрізь у CORE, не лише в маркетингу, тому правка одна на
   весь застосунок, а не локальна для розділу. docs/design-code-core.md
   §2 оновлено тим самим рішенням. */
.hh-section-title {
  font-family: var(--font-display);
  font-size: var(--size-display);
  line-height: var(--lh-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caps);
}
.hh-h1 { font-family: var(--font-text); font-size: var(--size-h1); line-height: var(--lh-h1); font-weight: var(--weight-bold); }
.hh-h2 { font-family: var(--font-text); font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: 600; }
.hh-h3 { font-family: var(--font-text); font-size: var(--size-h3); line-height: var(--lh-h3); font-weight: var(--weight-medium); }

.hh-text        { font-size: var(--size-body);    line-height: var(--lh-body); margin: 0; }
.hh-small       { font-size: var(--size-small);   line-height: var(--lh-small); margin: 0; }
.hh-caption     { font-size: var(--size-caption); line-height: var(--lh-caption); margin: 0; }

.hh-muted  { color: var(--text-muted); }
.hh-faint  { color: var(--text-faint); }
/* Колір статусу для ТЕКСТУ всередині рядка («…, помилок 3», «Видано ✓»).
   .hh-error не підходить: це блок-флекс з іконкою, а тут — слово посеред
   речення. Екрани вже писали .hh-danger/.hh-ok, а стилю не було (скан
   01.10.2026) — текст лишався звичайним. Колір не єдиний носій: поруч
   завжди слово, що каже, що сталось. */
.hh-danger { color: var(--danger); }
.hh-ok     { color: var(--ok); }

/* Службовий надпис над блоком. Капс — брендовий прийом, тому з трекінгом. */
.hh-overline {
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  margin: 0;
}

/* Числа. Табличні цифри — не естетика: без них колонка сум «дихає» на
   кожному рядку, і око не може порівняти порядок величини по вертикалі. */
.hh-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.hh-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap; /* «1 200,00 UAH» не розривається між сумою й валютою */
}
.hh-money--neg   { color: var(--money-neg); }
.hh-money--pos   { color: var(--money-pos); }

/* Технічний ідентифікатор: SKU, номер замовлення, UUID, ключ ідемпотентності. */
.hh-code {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--text-muted);
  word-break: break-all;
}
/* Номер, який не можна рвати посередині: ТТН НП (14 цифр) у вузькій
   колонці реєстру ламався на два рядки через break-all вище — людина
   диктує його по телефону й копіює цілим (реєстр «Дроп FOTL», 27.09.2026). */
.hh-code--nowrap { white-space: nowrap; word-break: keep-all; }
.hh-nowrap { white-space: nowrap; }

/* Клітинка «головне + другорядне під ним» (ТТН і статус НП, чип оплати й
   стан накладеного, ім'я й телефон). Один блок, а не <br>: на телефоні
   клітинка .hh-table--responsive — flex «підпис ↔ значення», і обидва
   рядки мають лишитися одним значенням праворуч. */
.hh-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-cell-stack__sub { font-size: 11px; line-height: 1.3; color: var(--text-muted); }

/* Клітинка «Причина» вкладки «Списання» туру (07.10.2026): причина →
   коментар → чип рішення → дія, одним стовпцем замість двох. Рядок чипа —
   власний flex (чип + ціна продажу поруч), дія — під ним. На телефоні
   значення клітинки стоїть праворуч від підпису, тож стос і кнопки
   притискаються до правого краю, як решта значень картки. */
.hh-writeoff-cause__decision { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.hh-writeoff-cause__action { margin-top: 4px; }
/* Кнопка всередині стосу («Замінити товар» у вирізці видаткової) — за
   розміром тексту, а не на всю ширину клітинки: стос — flex-колонка зі
   stretch за замовчуванням. */
.hh-cell-stack > .hh-btn { align-self: flex-start; }
@media (max-width: 767px) {
  .hh-table--responsive td > .hh-cell-stack > .hh-btn { align-self: flex-end; }
  .hh-table--responsive td > .hh-writeoff-cause { align-items: flex-end; text-align: right; }
  .hh-writeoff-cause .hh-btn-group { justify-content: flex-end; }
}

/* Базовий колір посилань (власник 06.10.2026: «на темній темі лінки в
   текстах сині некрасиві»). Посилання без класу — у тексті з markdown,
   у підказках, у старих рядках розмітки — малювались кольором браузера
   (#0000EE / фіолетовий visited), що на темній темі виглядає чужим.
   :where() — нульова специфічність: будь-який клас (hh-link, hh-card,
   hh-list__item…) і далі перекриває це правило. */
:where(a:not([class])) {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
}
:where(a:not([class])):hover { color: var(--accent-hover); text-decoration-color: currentColor; }
:where(a:not([class])):visited { color: var(--accent); }

.hh-link {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
}
.hh-link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

/* Посилання, що виглядає як заголовок, не як лінк (Роман, 14.09.2026,
   заголовок картки туру: «X · Джамала · Рух Мій» — три клікабельні
   сегменти, жоден не має виглядати блакитним). Той самий рецепт, що вже
   несе .hh-filerow__name нижче в цьому файлі: колір із тексту, не з
   --accent, підкреслення лише на hover — так лишається зрозуміло, що це
   можна натиснути, не змагаючись візуально з дійсно другорядними лінками
   картки. */
.hh-link--plain { color: var(--text); text-decoration: none; }
.hh-link--plain:hover { text-decoration: underline; }

/* Посилання, яке насправді кнопка. Трапляється щоразу, коли дія лишається
   всередині сторінки (перейти на вкладку, розгорнути): адреси в неї немає,
   тож <a href> був би брехнею для клавіатури й читалки. Але браузер малює
   <button> коробкою, і посеред речення вона виглядає чужорідною плашкою. */
button.hh-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   ЗНАК СИСТЕМИ: «хюґе» + CORE

   Один знак на всю систему — і на телефоні, і на десктопі. Раніше шапка мала
   ДВА стани за шириною (горизонтальне лого / альтернативний знак), і це було
   правильно, поки в шапці стояв БРЕНД. Тепер там стоїть НАЗВА ПРОДУКТУ, а
   продукт не буває наполовину: людина заходить у CORE щодня, і нагадувати їй
   назву компанії двічі на день немає потреби.

   Чому саме альтернативний знак, а не повне лого: брендбук передбачив його
   рівно для випадку «потрібна мінімально впізнавана позначка бренду, без
   лишнього». Внутрішній інструмент — саме той випадок. Повне лого лишається
   для того, що дивиться назовні: документ, лист, презентація.

   ЩО ТУТ НАБИРАЄТЬСЯ ШРИФТОМ, А ЩО НІ
   Знак — намальований svg, бо лого не набирається шрифтом (правило
   брендбука). Набирається лише слово CORE, і саме тому воно читається як
   назва продукту при знаку, а не як частина знака.

   ВИРІВНЮВАННЯ — ПО БАЗОВІЙ ЛІНІЇ, А НЕ ПО ЦЕНТРУ
   Ink у logo-alt.svg притиснутий до низу viewBox: у «хюґе» немає виносних
   елементів донизу, тож низ знака — це і є його базова лінія. Тому знак
   ставиться низом, а CORE опускається на власний нижній виносний елемент
   (0.18em при line-height: 1). Центрування замість цього дає слово, що
   висить над знаком — на 22px це видно одразу.

   Розмір задається ОДНИМ числом --lockup-h (висота знака); кегль CORE, зазор
   і зсув рахуються від нього. Інакше кожне місце підбирало б кегль наново.
   -------------------------------------------------------------------------- */

.hh-lockup {
  --lockup-h: 22px;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--lockup-h) * .34);
  color: var(--logo);
  flex: none;
}

.hh-lockup__mark { display: block; flex: none; }
.hh-lockup__mark svg {
  display: block;
  height: var(--lockup-h);
  width: auto;
  fill: currentColor;
}

.hh-lockup__core {
  font-family: var(--font-display);
  font-size: calc(var(--lockup-h) * .58);
  line-height: 1;
  letter-spacing: .14em;
  /* Трекінг додає порожнечу ПІСЛЯ останньої літери — без цього зазор
     праворуч від E більший, ніж ліворуч від C, і знак стоїть криво. */
  margin-right: -.14em;
  transform: translateY(.18em);
  white-space: nowrap;
}

/* Великий розмір — вхід, заставка, порожній стан. Не окремий компонент:
   змінюється рівно одне число. */
.hh-lockup--lg { --lockup-h: 46px; }

/* --------------------------------------------------------------------------
   1а. ПРІОРИТЕТ СТИСНЕННЯ: текст деградує, керування — ні

   Коли на вузькому екрані бракує ширини, елементи поводяться по-різному, і
   це не питання смаку, а класифікація:

   | Деградує (можна обрізати) | Не деградує (або цілком, або ніяк) |
   |---------------------------|------------------------------------|
   | назва, підпис, значення   | кнопка, іконка дії, поле вводу     |
   | вміст чіпа, рядок таблиці | лічильник сповіщень, пошук         |
   | хлібні крихти             | навігація, підтвердження, закриття |

   Обрізаний текст лишається зрозумілим: «Концерт · Vien…» усе ще каже, де
   людина. Обрізане керування не деградує, а ЗНИКАЄ — і ніяк не повідомляє
   про себе. Різниця не косметична: дзвінок, що виїхав за правий край,
   означає, що польова роль не бачить сповіщень узагалі, на єдиному
   пристрої, з якого працює. Саме так це й сталося на 375px.

   Практично: у тісному рядку першим стискається найдовший ТЕКСТ, і лише
   якщо цього мало — керування ховається у «Ще», але не обрізається.

   Перевірка перед тим, як вважати екран зробленим:
   жоден елемент керування не має scrollWidth > clientWidth і не виходить
   за межі viewport на 375px.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Розкладка
   -------------------------------------------------------------------------- */

.hh-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4);
}
@media (min-width: 768px) {
  .hh-page { padding: var(--sp-5) var(--sp-6); }
}

.hh-stack     { display: flex; flex-direction: column; gap: var(--sp-4); }
.hh-stack--sm { gap: var(--sp-2); }
.hh-stack--lg { gap: var(--sp-6); }

.hh-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.hh-row--between { justify-content: space-between; }

.hh-grid {
  display: grid;
  gap: var(--sp-3);
  /* auto-fit: секції з фіксованою малою кількістю карток (2 локації, 2 KPI)
     розтягуються на всю ширину, а не лишають порожні треки в кутку. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Для довгих/змінних списків: auto-fit розтягує одиноку картку в неповному
   останньому рядку на всю ширину контейнера — auto-fill лишає порожні
   треки й картка зберігає свій нормальний розмір. */
.hh-grid--fill {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Заголовок розділу з діями праворуч. */
.hh-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  /* Без переносу дія поруч із довгою назвою розділу виїжджає за екран.
     Перенести її на наступний рядок — не втрата: дія лишається цілою. */
  flex-wrap: wrap;
}
/* Роман, живий скріншот 08.09.2026 («Усі продажі»/«Шоуруми» на телефоні):
   заголовок розділу + смуга підрозділів (.hh-subbar, shell.css) під ним
   разом займають більшу частину першого екрана. Тут заголовок — уже
   ДРУГИЙ рівень навігації після смуги, а не перший елемент сторінки,
   тому запас під ним тісніший саме на мобільному (sp-3→sp-2). */
@media (max-width: 767px) {
  .hh-section-head { margin-bottom: var(--sp-2); }
}

/* Меню «Ще» — рідкісні/небезпечні дії топбару картки (instruction-
   order-view.md §3/§11.1). Мінімальний попап: не position:fixed, як
   .hh-suggest вище (той рахує позицію під довільним полем на сторінці,
   що скролиться) — кнопка топбару нікуди не з'їжджає, звичайного
   position:absolute у відносно спозиціонованій обгортці досить. */
.hh-menu { position: relative; display: inline-flex; }
.hh-menu__list {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  z-index: var(--z-suggest);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--sp-1);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}
.hh-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--size-small);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hh-menu__item:hover { background: var(--surface-hover); }
.hh-menu__item--danger { color: var(--danger); }
/* Пункт-галочка (role="menuitemcheckbox") — «Показати ▾» у «Роялті»
   артиста (30.09.2026). Галочка — текстом у фіксованій клітинці, щоб
   підписи не стрибали, коли її ставлять/знімають; тон --choco без
   заливки (instruction-design-scale.md §2). На телефоні пункт — 44px
   заввишки, під палець. */
.hh-menu__item--check { display: flex; align-items: center; gap: var(--sp-2); }
.hh-menu__check { display: inline-block; width: 1em; flex: none; text-align: center; color: var(--choco); font-weight: 700; }
@media (max-width: 767px) {
  .hh-menu__item--check { min-height: 44px; }
}

.hh-divider {
  height: var(--border-w);
  background: var(--border-faint);
  border: 0;
  margin: var(--sp-4) 0;
}

/* --------------------------------------------------------------------------
   3. Кнопки

   Первинна дія на екрані рівно одна. Дві первинні кнопки поруч означають,
   що ми не вирішили, чого хочемо від людини, і перекладаємо це на неї.
   -------------------------------------------------------------------------- */

.hh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.hh-btn--primary {
  background: var(--action-bg);
  color: var(--action-fg);
}
.hh-btn--primary:hover:not(:disabled) { background: var(--action-bg-hover); }

/* Світла тема: суцільна choco-заливка (--action-bg тут = #4f3529) читалась як
   «кричуща» поруч із суцільним активним пунктом меню (Роман, живий скріншот,
   30.08.2026) — виняток для Primary-кнопок скасовано, docs/design-code-core.md
   §1.2. Тон сильніший (15%), ніж у вибраних станів (8%, §1.1), і є рамка —
   так Primary лишається візуально важливішою за Secondary/вибраний стан, не
   зливаючись у той самий «просто вибраний» вигляд. Токен --action-bg лишається
   як є для інших власників (прогрес-бар KPI, аватар, брендова картка) — це
   не інтерактивні елементи вибору, правило їх не стосується (§1.3). */
[data-theme="light"] .hh-btn--primary {
  background: rgba(79, 53, 41, 0.15);
  border-color: var(--brand-chocolate);
  border-width: 1.5px;
  color: var(--brand-chocolate);
  font-weight: var(--weight-bold);
}
[data-theme="light"] .hh-btn--primary:hover:not(:disabled) { background: rgba(79, 53, 41, 0.22); }
[data-theme="light"] .hh-btn--primary[data-loading="true"]::after { color: var(--brand-chocolate); }

.hh-btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.hh-btn--secondary:hover:not(:disabled) { background: var(--surface-hover); }

.hh-btn--ghost { color: var(--text-muted); }
.hh-btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }

/* Небезпечна дія ніколи не первинна за виглядом: сторно й видалення не
   мають виглядати як те, що пропонує зробити система. */
.hh-btn--danger {
  background: transparent;
  border-color: var(--danger-border);
  color: var(--danger);
}
.hh-btn--danger:hover:not(:disabled) { background: var(--danger-quiet); }

/* ОБРАНИЙ ВАРІАНТ У РЯДКУ КНОПОК-ВИБОРУ — стан, а не друга головна дія.
   Роман, 25.09.2026, живий репорт по блоку «Видано товару» (X · Звіти):
   «я обираю одну з трьох опцій, але неясно яка обрана, не підсвічується».
   Обраний варіант мав лише `aria-pressed="true"` — тобто існував для
   читача екрана й не існував для ока, і «Зберегти» поруч натискалось
   наосліп.

   ЧОМУ НЕ --primary: у тому самому рядку «Зберегти» вже primary, і два
   однакових акценти сперечаються — око більше не відрізняє «що я обрав»
   від «що тут заклик до дії». Тому потрібен саме стан вибору.

   ЗАЛИВКА, А НЕ ЯСКРАВІША РАМКА — та сама причина, що вже записана над
   .hh-chip--filter[aria-pressed="true"] нижче: рамку на тьмяному екрані
   ввечері після події не видно, а це основний сценарій (§13 CLAUDE.md).
   Той самий набір значень, що в чипа, — не другий словник «обраного».

   --accent-contrast обов'язковий і не декоративний: у темній темі
   --accent світлий (#adbfd0, tokens.css), і успадкований від --ghost
   колір тексту дав би світле на світлому — рівно та біла-на-темному
   кнопка, яку в цьому проєкті вже ловили. Обидві теми задають
   --accent-contrast, тож контраст не «пливе».

   :hover перекритий явно: .hh-btn--ghost:hover має вищу специфічність за
   голий клас, і без цього рядка обраний варіант «губив» вибір під
   курсором. */
.hh-btn--choice[aria-pressed="true"],
.hh-btn--choice[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--weight-bold);
}

/* На телефоні мала кнопка все одно ціль дотику — 44px, не 32px: маленький
   формат стискає лише padding/шрифт, а не висоту. Звужується до 32px тільки
   на десктопі (@media min-width:768px нижче), де точність — миша. */
.hh-btn--sm { min-height: var(--touch); padding: 0 var(--sp-3); font-size: var(--size-small); }
.hh-btn--lg { min-height: 52px; padding: 0 var(--sp-5); font-size: 1rem; }

/* Смуга «← Назад: …» (nav-context.js, HH_NAV.bar/crossBar) — завжди
   притиснута ліворуч, хоч би в якому контейнері опинилась.

   Живий баг, власник, 01.10.2026: «Продаж → Онлайн → Комунікації», відкрите
   з «Головної», — «← Назад: Головна» стояло по центру над заголовком. Сама
   кнопка нічого не центрувала: `.hh-btn` — inline-flex із
   `justify-content: center`, а на цій вкладці #page стає flex-column
   (shell.css, `.hh-shell:has(.hh-comms-embed) #page`). Flex-item у колонці
   за замовчуванням тягнеться на всю ширину (align-items: normal → stretch),
   кнопка ставала 1216px завширшки, і `justify-content: center` ставив
   напис посередині. Те саме буде в будь-якому grid-контейнері
   (justify-self: stretch за замовчуванням).

   Тому не латка в shell.css під одну вкладку, а властивість самої смуги:
   на свою ширину й на початок рядка в будь-якому flex/grid-батьку. У
   звичайному блоковому потоці обидві властивості нічого не міняють. */
.hh-nav-back { align-self: flex-start; justify-self: start; margin-bottom: var(--sp-3); }

/* hh-showroom-shift-btn (screen-showrooms.js, картка локації «Шоуруми»)
   — Роман, живий скріншот 08.09.2026: «Почати зміну»/«Закрити зміну»
   поруч із дрібним підписом («Немає на зміні», hh-caption ~11px) і
   статистикою нижче виглядає непропорційно великою. Висота (--touch,
   44px, .hh-btn--sm вище) — свідома ціль дотику, її й на телефоні не
   чіпаємо. Звужуємо ширину/відступ — те, що робить кнопку просторою,
   не те, що робить її дотику́ю: менший горизонтальний padding, менший
   кегль (той самий caption-розмір, що підпис над кнопкою — кнопка й
   контекст навколо тепер однієї візуальної ваги) і без зайвого відступу
   знизу перед рядком статистики. Клас, не інлайн-перепис margin-bottom —
   renderShiftBlock() (screen-showrooms.js) далі несе інлайновий
   `style="margin-bottom:..."` (той самий на десктопі й мобільному), тут
   лише додаткові властивості поверх нього. */
@media (max-width: 767px) {
  .hh-showroom-shift-btn { padding: 0 var(--sp-2); font-size: var(--size-caption); }
}

@media (min-width: 768px) {
  .hh-btn--sm { min-height: 32px; }
}

/* На телефоні головна дія форми йде на всю ширину — промахнутись нічим. */
.hh-btn--block { width: 100%; }

.hh-btn:disabled,
.hh-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Кнопка в роботі: текст лишається на місці, щоб не стрибала розкладка. */
.hh-btn[data-loading="true"] { pointer-events: none; position: relative; color: transparent; }
.hh-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--action-fg);
  animation: hh-spin 700ms linear infinite;
}
.hh-btn--secondary[data-loading="true"]::after,
.hh-btn--ghost[data-loading="true"]::after { color: var(--text); }

@keyframes hh-spin { to { transform: rotate(360deg); } }

.hh-btn-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Дія над рядком списку/картки — іконкою, не текстом: «Змінити»/«Видалити»
   поруч у рядку захаращують і не влазять у мобільну ширину. Сам текст дії
   переходить у aria-label/title, бо іконка його не показує. Ціль дотику —
   той самий --touch поріг, що й .hh-btn--sm (issues-log.md #72). */
.hh-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hh-icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.hh-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hh-icon-btn--danger { color: var(--danger); }
.hh-icon-btn--danger:hover:not(:disabled) { background: var(--danger-quiet); color: var(--danger); }

/* «Суперколекція» (144) — зірка в рядку списку колекцій. Позначені нею
   колекції формують ярлики лівого меню («Колекції», перед «Усі колекції
   та дропи») замість двох раніше жорстко зашитих у shell.html пунктів.
   Активний стан заливає зірку тим самим --warn, що жовтий чіп статусу
   («У виробництві») — те саме «увага сюди», не новий колір заради одного
   перемикача. */
.hh-icon-btn--star[aria-pressed="true"] { color: var(--warn); }
.hh-icon-btn--star[aria-pressed="true"] svg { fill: currentColor; }

.hh-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.hh-icon-btn-group { display: flex; gap: var(--sp-1); }

/* --------------------------------------------------------------------------
   4. Форма

   Найважливіший компонент системи. Мета — «вбити цифри втомленою рукою»,
   тому: велика ціль, видима межа, підказка над помилкою, помилка поруч із
   полем, а не одним списком угорі.
   -------------------------------------------------------------------------- */

.hh-form { max-width: var(--form-max); display: flex; flex-direction: column; gap: var(--sp-4); }

.hh-field { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Два поля одним рядком: широке й вузьке — «Сума» і «Валюта» (власник,
   01.10.2026, заявка на оплату). Сума забирає все місце, валюта — рівно
   на трилітерний код зі стрілкою. На телефоні пара лишається рядком
   (375px вистачає з запасом); складається в стовпчик лише на зовсім
   вузькому екрані, де валюта стиснула б суму до кількох цифр. */
.hh-field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 112px);
  gap: var(--sp-3);
  align-items: end;
}
@media (max-width: 339px) {
  .hh-field-pair { grid-template-columns: minmax(0, 1fr); }
}

.hh-label {
  font-size: var(--size-small);
  line-height: var(--lh-small);
  font-weight: var(--weight-medium);
  color: var(--text);
}
/* Позначаємо НЕобов'язкове, а не обов'язкове: у формі внесення звіту
   обов'язкове майже все, і зірочки перетворюються на шум. */
.hh-label__optional { color: var(--text-faint); font-weight: var(--weight-regular); }
/* Обов'язкове поле — зірочка біля назви (редактор адреси замовлення). */
.hh-req { color: var(--danger); }

/* Значення поля ЛИШЕ ПОКАЗОМ у формі (напр. «Категорія (з 1С)» у формі
   товару, 30.09.2026): текст, а не сірий інпут — інакше людина шукає, чому
   поле «не клікається». Розмір тексту поля, під ним звичайна .hh-hint. */
.hh-field__static {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--text);
  overflow-wrap: anywhere;
}
.hh-field__static.hh-muted { color: var(--text-muted); }

/* Розмір поля — один спільний, як і .hh-chip--filter вище (issue #714):
   .hh-input/.hh-select/.hh-textarea вже рендерились через ці класи на всіх
   екранах з формами й фільтрами (включно з <input type="date">, скріншот
   Романа 28.08.2026 — рядок пошуку продажів + період), окремих копій стилю
   нема. Свідомо НЕ через --touch (той самий токен ще й на кнопках/чекбоксах/
   вкладках — їх зменшувати не просили): своя пара значень тут і в
   мобільному брейкпоінті нижче, а на десктопі — ще крок вниз. font-size на
   мобільному лишається 16px (iOS-зум), на десктопі зуму нема — можна менше;
   значок календаря в type="date" слідує за font-size/padding поля, тож
   зменшується разом з рештою. */
.hh-input,
.hh-select,
.hh-textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--sp-1) var(--sp-3);
  background: var(--surface-sunken);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem; /* 16px: менше — і iOS зумить сторінку на фокусі */
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hh-textarea { min-height: 80px; resize: vertical; padding: var(--sp-2) var(--sp-3); }

@media (min-width: 768px) {
  .hh-input,
  .hh-select,
  .hh-textarea {
    min-height: 34px;
    font-size: var(--size-body); /* 15px: мишею зумом на фокусі не ризикуємо */
  }
  .hh-textarea { min-height: 72px; }
}

/* Плейсхолдер vs дані (issue-log #113, 21.08.2026): --text-faint сам по
   собі вже приглушений (4.6:1, «НЕ для даних» — tokens.css), але на
   числових полях (місткість/відвідуваність) цього було мало — коротке
   число тим самим шрифтом і накресленням, що й реальне значення, читалось
   як уже внесене, не як приклад. Курсив — додатковий, не колірний сигнал
   «це підказка», який працює навіть коли differences у відтінку губляться
   на маленькому екрані/при поганому світлі (CLAUDE.md §13 — поле в
   польових умовах, з телефону, ввечері). */
.hh-input::placeholder,
.hh-textarea::placeholder { color: var(--text-faint); font-style: italic; }

.hh-input:hover,
.hh-select:hover,
.hh-textarea:hover { border-color: var(--text-faint); }

/* Значок календаря в type="date" — за замовчуванням браузер малює його під
   світлу тему незалежно від нашої (color-scheme ніде не заявлений), тому
   на темному полі значок темний на темному — не видно (Роман, 17.08,
   реальний баг). color-scheme на самому інпуті каже браузеру, яку палітру
   штатних елементів керування малювати, і зачіпає лише їх — не .hh-input
   загалом, кольори якого й так задані токенами. */
.hh-input[type="date"] { color-scheme: dark; }
[data-theme="light"] .hh-input[type="date"] { color-scheme: light; }

/* --------------------------------------------------------------------------
   Підказка автозаповнення поля (.hh-suggest) — issue #718 follow-up, скарга
   Романа: нативний <input list>+<datalist> (Місто/Локація на формі події,
   screen-tours.js/screen-artists.js) браузер малює ЯК ВЛАСНИЙ, поза DOM-
   деревом попап — його позицію CSS не контролює ВЗАГАЛІ, і саме тому список
   із самого клацання (ще не відфільтрований, 25 обласних центрів) міг
   з'явитись праворуч поля замість під ним: чим більший список, тим більше
   свободи має внутрішня евристика браузера, а не наш стиль. Рішення —
   звичайний DOM-елемент, позиція якого рахується в JS (position:fixed,
   getBoundingClientRect інпута) і тому однакова для короткого й довгого
   списку, завжди ПІД полем.
   -------------------------------------------------------------------------- */
.hh-suggest {
  position: fixed;
  z-index: var(--z-suggest);
  margin: 0;
  padding: var(--sp-1) 0;
  list-style: none;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  max-height: min(260px, 40vh);
  overflow-y: auto;
}
.hh-suggest[hidden] { display: none; }
.hh-suggest__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
}
.hh-suggest__item-main { color: var(--text); font-size: var(--size-body); line-height: var(--lh-body); }
.hh-suggest__item-sub { color: var(--text-faint); font-size: var(--size-caption); line-height: var(--lh-caption); }
.hh-suggest__item:hover,
.hh-suggest__item--active { background: var(--surface-sunken); }

/* Мінімальний rich-text для «Довгого опису» (issue coordinator, 25.08.2026,
   design/screen-products.js richTextFieldHtml) — тулбар кнопок над
   contenteditable-полем, вигляд якого свідомо той самий, що .hh-textarea
   вище: людина не має відчувати, що це «якийсь інший, ненадійний» тип
   поля. */
.hh-richtext-toolbar {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.hh-richtext-btn {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface-sunken);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  cursor: pointer;
}
.hh-richtext-btn:hover { border-color: var(--text-faint); }
.hh-richtext {
  width: 100%;
  min-height: 140px;
  padding: var(--sp-3);
  background: var(--surface-sunken);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.4;
  overflow-y: auto;
}
.hh-richtext:hover { border-color: var(--text-faint); }
.hh-richtext:focus-visible,
.hh-richtext:focus {
  outline: var(--focus-w) solid var(--accent);
  outline-offset: 2px;
}
.hh-richtext p { margin: 0 0 var(--sp-2); }
.hh-richtext p:last-child { margin-bottom: 0; }
.hh-richtext ul, .hh-richtext ol { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); }

.hh-input:disabled,
.hh-select:disabled,
.hh-textarea:disabled {
  background: var(--surface);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* Тільки читання ≠ вимкнене: значення лишається повноколірним, зникає межа.
   Так видно, що дані є, але правити їх не тут (закритий період, чужий скоуп). */
.hh-input[readonly] {
  background: transparent;
  border-color: var(--border-faint);
}

/* Числове поле. Праве вирівнювання й табличні цифри — щоб колонка сум у
   формі читалась так само, як у таблиці. */
.hh-input--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Поле з одиницею (валюта, шт, %). Одиниця — частина поля, а не підпис поруч:
   інакше на телефоні вона переїжджає на інший рядок. */
.hh-input-group {
  display: flex;
  align-items: stretch;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  overflow: hidden;
}
.hh-input-group:focus-within { border-color: var(--accent); }
.hh-input-group .hh-input {
  border: 0;
  background: transparent;
  border-radius: 0;
}
.hh-input-group .hh-input:focus-visible { outline: none; }
.hh-input-group__unit {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border-left: var(--border-w) solid var(--border-faint);
  color: var(--text-muted);
  font-size: var(--size-small);
  white-space: nowrap;
}

.hh-hint {
  /* Блок, а не рядок. У .hh-field це виходило само (там колонка з flex), а от
     усередині прапорця підказка злипалася з назвою в один рядок:
     «Запам'ятати цей пристрійНе питатимемо пароль 30 днів». Правило поля не
     має залежати від того, у якому компоненті воно опинилось. */
  display: block;
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}

/* Попередження про схожий на вигляд артикул — тон warn, а не danger: це не
   помилка (легітимно схожі коди бувають), а привід подивитись уважніше
   перед збереженням. Колір не єдиний носій сигналу — текст поруч завжди
   каже, з чим саме збіг. */
.hh-hint--warn { color: var(--warn); }

/* Черга відвантаження (design/shipment-queue.js, власник 03.10.2026) — тон
   кожної частини сповіщення: прострочене червоним, «сьогодні» й «без дати
   понад добу» — warn, нагадування на найближчі дні — приглушено. Колір не
   єдиний носій: текст частини сам каже, що саме сталось. Подвійний клас —
   щоб перебити колір .hh-link, не !important. */
.hh-link.hh-shipment-queue__part--danger { color: var(--danger); }
.hh-link.hh-shipment-queue__part--warn { color: var(--warn); }
.hh-link.hh-shipment-queue__part--muted { color: var(--text-muted); }

/* «Видається, ці замовлення можна вважати корпоративними»
   (design/corporate-suggestions.js, власник 03.10.2026). Рядок — тихий
   блок із повітрям; кнопки рішень переносяться на телефоні, а не
   стискаються (менеджер вирішує й з телефона). */
/* Згорнута смужка (власник 04.10.2026): заголовок — перемикач ▸/▾ із
   лічильником, той самий .hh-tasks-closed__toggle, що «Виконані (N)», лише
   розміром і кольором заголовка. Довгий заголовок на телефоні переноситься,
   трикутник і лічильник лишаються на своїх місцях. */
.hh-corp-suggest__head { margin: 0; }
.hh-corp-suggest:not(.hh-corp-suggest--collapsed) .hh-corp-suggest__head { margin-bottom: var(--sp-3); }
.hh-tasks-closed__toggle.hh-corp-suggest__toggle {
  font-size: inherit; color: var(--text); text-decoration: none; text-align: left;
  align-items: baseline; gap: var(--sp-2); width: 100%;
}
.hh-corp-suggest__toggle:hover .hh-corp-suggest__title { text-decoration: underline; }
.hh-corp-suggest__title { flex: 0 1 auto; min-width: 0; }
.hh-corp-suggest__count { flex: none; font-weight: var(--weight-regular); }
.hh-corp-suggest--collapsed { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.hh-corp-suggest__buyer { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); }
.hh-corp-suggest__orders-toggle { min-height: 28px; }
.hh-corp-suggest__orders-body { max-width: 32rem; margin: var(--sp-1) 0 0 var(--sp-3); padding-left: var(--sp-2); border-left: var(--border-w) solid var(--border); }
.hh-corp-suggest__orders { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.hh-corp-suggest__orders li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 3px 0; }
.hh-corp-suggest__orders-sum { flex: none; font-variant-numeric: tabular-nums; }
.hh-corp-suggest__orders .hh-faint { white-space: nowrap; }
.hh-corp-suggest__list { list-style: none; margin: 0; padding: 0; }
.hh-corp-suggest__row { padding: var(--sp-3) 0; border-top: var(--border-w) solid var(--border); }
.hh-corp-suggest__row:first-child { border-top: none; padding-top: 0; }
.hh-corp-suggest__signs { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); color: var(--text-muted); font-size: 0.875rem; }
.hh-corp-suggest__signs li { margin: 2px 0; }
.hh-corp-suggest__decisions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.hh-corp-suggest__decisions > .hh-chip { align-self: flex-start; }
.hh-corp-suggest__actions, .hh-corp-suggest__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.hh-corp-suggest__history { margin-top: var(--sp-3); border-top: var(--border-w) solid var(--border); padding-top: var(--sp-2); }
.hh-corp-suggest__history > summary { cursor: pointer; color: var(--text-muted); padding: var(--sp-1) 0; }
.hh-corp-suggest__hist { padding: var(--sp-2) 0; border-top: var(--border-w) solid var(--border); }
.hh-corp-suggest__hist:first-child { border-top: none; }
.hh-corp-suggest__hist--reverted { opacity: 0.7; }

.hh-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--danger);
}

/* Помилка позначена і кольором, і межею, і текстом. Одним лише кольором —
   не позначена: далтонізм і тьмяний екран у полі трапляються разом. */
.hh-field--error .hh-input,
.hh-field--error .hh-select,
.hh-field--error .hh-textarea,
.hh-field--error .hh-input-group { border-color: var(--danger); }

.hh-select {
  appearance: none;
  padding-right: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--sp-4) center, right calc(var(--sp-4) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Чекбокс і перемикач */
.hh-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch);
  cursor: pointer;
}
.hh-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }

/* Прапорець із підказкою — двоярусний, і тоді квадратик стає до ПЕРШОГО
   рядка, а не до середини всього блока. По центру він з'їжджає тим нижче,
   чим довша підказка, і перестає читатись як пара до назви. */
.hh-check:has(.hh-hint) { align-items: flex-start; }
.hh-check:has(.hh-hint) input { margin-top: 2px; }

.hh-switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; min-height: var(--touch); }
.hh-switch input { position: absolute; opacity: 0; pointer-events: none; }
.hh-switch__track {
  width: 44px; height: 26px; flex: none;
  background: var(--surface-active);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hh-switch__track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hh-switch input:checked + .hh-switch__track { background: var(--accent); border-color: var(--accent); }
.hh-switch input:checked + .hh-switch__track::after { transform: translateX(18px); background: var(--accent-contrast); }
.hh-switch input:focus-visible + .hh-switch__track { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }

/* Сегментований перемикач — для двох-трьох взаємовиключних режимів
   (наприклад, валюта операції / валюта звітності). */
/* У формі поле розтягується на всю ширину, а перемикач режиму не має:
   розтягнутий на 500px «Усі / Лише обрані» читається як два далекі один
   від одного варіанти, а не як один вибір. */
.hh-field > .hh-segmented { align-self: flex-start; }

.hh-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-sunken);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  /* inline-flex росте за вмістом і НЕ знає про ширину сторінки. П'ять
     сегментів фільтра звітів («усі / чекають / чернетки / на правках /
     прийняті») дають 382px там, де вміст сторінки має 328: контрол вилазив
     за правий край, з'їдав відступ і впирався в самий край екрана
     (аудит X, 03.09.2026, «X · Звіти» на 360px).

     max-width, а не прокрутка: сегменти можуть переносити підпис у два
     рядки — контрол стає вищим, але цілим і видимим. Прокрутка тут була б
     гіршою, ніж у смугах закладок: там за краєм лишається ще один пункт і
     це видно, а сегментний фільтр читається як ОДНА річ, і половина цієї
     речі за краєм виглядає поламаною, а не продовженою. */
  max-width: 100%;
}
.hh-segmented__item {
  min-height: 34px;
  padding: 0 var(--sp-3);
  /* Без цього max-width на самому контролі (вище) нічого не дає: у flex
     елемент за замовчуванням має min-width:auto й НЕ стискається менше за
     свій вміст, тож сегменти просто вилазили за обмежену коробку. З
     min-width:0 вони стискаються, а підпис переноситься в другий рядок —
     контрол стає вищим, зате цілим. */
  min-width: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--size-small);
  cursor: pointer;
}
.hh-segmented__item[aria-pressed="true"],
.hh-segmented__item[aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--text);
}

/* Кольорові модифікатори обраного сегмента (issue #472, Роман: обрана
   опція «Власний продукт»/«Активний» виглядала так само нейтрально, як
   «Закупівля»/«В архіві» — попросив колір за змістом стану, той самий
   принцип, що вже .hh-chip--ok/--warn у товарних чіпах вище). Клас додається
   в JS ЛИШЕ на обрану кнопку (segmentedField(), screen-products.js) — тому
   тут спеціфічність вища за нейтральний [aria-pressed="true"] вище (два
   класи + атрибут проти класу + атрибута), а не позиційний nth-child. */
.hh-segmented__item[aria-pressed="true"].hh-segmented__item--ok {
  background: var(--ok-quiet);
  color: var(--ok);
}
.hh-segmented__item[aria-pressed="true"].hh-segmented__item--warn {
  background: var(--warn-quiet);
  color: var(--warn);
}
.hh-segmented__item[aria-pressed="true"].hh-segmented__item--gray {
  background: var(--surface-sunken);
  color: var(--text-muted);
}
/* «Небезпечний» тон — стан «не встановлено»/«не обрано» на «Роль у
   комплекті» й «Вид товару» (issue coordinator, живе уточнення 29.08.2026:
   Роман попросив підсвітити відсутню класифікацію червоним, щоб її було
   видно з першого погляду, а не лише текстом). Той самий рецепт кольору,
   що --ok/--warn/--gray вище, лише токен var(--danger)/var(--danger-quiet)
   — та сама пара, що вже .hh-chip--danger/.hh-badge-stock--out. */
.hh-segmented__item[aria-pressed="true"].hh-segmented__item--danger {
  background: var(--danger-quiet);
  color: var(--danger);
}
/* Статична (не клікабельна) кнопка — картка ПЕРЕГЛЯДУ показує "Роль у
   комплекті" тим самим компонентом, що форма редагування, але без запису:
   курсор не повинен обіцяти клік, якого не буде (issue coordinator,
   29.08.2026, живе уточнення "обидва поля на обох екранах"). */
.hh-segmented__item--static { cursor: default; }
.hh-segmented--wrap { flex-wrap: wrap; }

/* Вибір із кількох варіантів плитками, а не списком.

   Для польової форми це не оздоблення: у select треба тапнути, дочекатися
   системного списку, знайти рядок і тапнути ще раз — чотири дії й втрата
   контексту. Плитка — одна дія, і всі варіанти видно одночасно, тобто вибір
   робиться оком, а не пам'яттю. Виправдано, поки варіантів небагато (до
   восьми); далі список чесніший. */
.hh-kindgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--sp-2);
}

.hh-kind {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: var(--sp-2);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--size-small);
  cursor: pointer;
  text-align: center;
}
.hh-kind:hover { border-color: var(--text-faint); color: var(--text); }
.hh-kind svg { width: 20px; height: 20px; }

.hh-kind--on {
  border-color: var(--accent);
  background: var(--accent-quiet);
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* Панель дії, прилипла до низу екрана.

   Для польової форми головна дія має бути під великим пальцем завжди, а не
   в кінці довгого скролу: людина заповнює поле, дивиться на нього, і кнопка
   мусить бути там же. На десктопі прилипання зайве — форма коротка й видима
   цілком, тож там панель стає звичайним рядком. */
.hh-formbar {
  position: sticky;
  /* Прилипає НАД нижньою навігацією, а не до краю вікна: інакше головна дія
     ховається під панеллю вкладок — тобто саме та кнопка, заради якої
     панель і робилась. */
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.hh-formbar .hh-btn { flex: 1; }

/* ТРЕТЯ КНОПКА НЕ ВЛІЗАЄ, І СТИСКАТИ ЇЇ НЕ МОЖНА.

   Дві дії в рядку на 375px живуть добре. Третя — «Зберегти й завести
   наступний» — сама по собі ширша за половину екрана, і `flex: 1` почав би
   обрізати саме її, тобто керування. За пріоритетом стиснення текст деградує,
   керування — ні: обрізана назва ще зрозуміла, обрізана кнопка перестає
   казати, що вона робить.

   Тому довга дія переходить на власний рядок. Панель від цього вища на одну
   кнопку, і це прийнятна ціна: висота видима й передбачувана, а обрізана
   кнопка — ні. */
.hh-formbar { flex-wrap: wrap; }
.hh-formbar .hh-btn--wide { flex: 1 0 100%; order: -1; }

@media (min-width: 768px) {
  .hh-formbar {
    position: static;
    bottom: auto;
    background: none;
    padding: var(--sp-4) 0 0;
    flex-wrap: nowrap;
  }
  .hh-formbar .hh-btn { flex: 0 0 auto; }
  .hh-formbar .hh-btn--wide { flex: 0 0 auto; order: 0; }
}

/* --------------------------------------------------------------------------
   5. Картка й показник
   -------------------------------------------------------------------------- */

.hh-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.hh-card--flush  { padding: 0; overflow: hidden; }
.hh-card--brand  { background: var(--surface-brand); border-color: transparent; color: var(--text-on-brand); }
/* Тонований фон («--choco-tint» з мокапів) — для блоку, якого немає більше
   ніде на екрані (instruction-clients.md §4.2, «Мій стиль»). color-mix,
   не зафіксований rgba (той самий прийом, що .hh-stepline--active) — той
   самий відтінок працює в темній і світлій темі однаково. */
.hh-card--tint {
  background: color-mix(in srgb, var(--surface-brand) 8%, var(--surface));
}

.hh-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* Секція всередині СПІЛЬНОЇ картки — тонка лінія-розділювач замість
   обгородження кожного блоку повноекранної сторінки в окрему картку з
   рамкою й округленими кутами (docs/01-rules/instruction-design-scale.md
   §2/§3, review 10.09.2026 round 1 БЛОКЕР п.4). Використовується з
   `.hh-card.hh-card--flush` (padding:0) зовні — падинг 13-14px живе тут,
   на секції, не на самій картці. Перший застосований екран — вкладка
   «Роялті» картки артиста (design/screen-artists.js). */
.hh-card-section { padding: 13px 14px; border-top: var(--border-w) solid var(--border); }
.hh-card-section:first-child { border-top: none; }

/* Клікабельна картка. Уся площа — ціль, не тільки заголовок. */
a.hh-card { display: block; text-decoration: none; color: inherit; }
a.hh-card:hover { background: var(--surface-hover); }

/* Показник. Значення більше за підпис — читається з витягнутої руки. */
.hh-stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.hh-stat__label {
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Значення показника — фірмовим, бо це число: цифри в Neutral Face виразні,
   а капітельність на них не діє. */
.hh-stat__value {
  font-family: var(--font-display);
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Але показник не завжди число. «Топ-товар: Basic Hoodie Black» — це дані,
   і фірмовим шрифтом воно стане «BASIC HOODIE BLACK». Тому текстовому
   значенню — окремий модифікатор, а не виняток на розсуд того, хто верстає. */
.hh-stat__value--data {
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.hh-stat__delta { font-size: var(--size-small); color: var(--text-muted); }
.hh-stat__delta--up   { color: var(--money-pos); }
.hh-stat__delta--down { color: var(--money-neg); }

/* --------------------------------------------------------------------------
   6. Чіпи

   Два різні призначення, які легко переплутати:
   .hh-chip        — статус документа (лише читати);
   .hh-chip--filter — обраний фільтр/вимір (можна зняти).

   Розмір один на весь портал (issue #714, Роман 28.08.2026): усі екрани й
   так уже верстали фільтр-чіпи через цей самий .hh-chip--filter, окремих
   копій не було — «завеликий і неоднаковий» був про сам спільний розмір
   (32px min-height, 12px шрифт), а не про розбіжність між екранами. Тому
   правка тут одна — desktop 32→28px / 12→11px, мобільний брейкпоінт нижче
   28→24px / 11→10px — і застосовується одразу всюди, без правок по
   екранах. */

.hh-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  border: var(--border-w) solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: 11px;
  line-height: var(--lh-caption);
  font-weight: var(--weight-medium);
  white-space: normal;
}

/* Статус читається і без кольору — крапка має форму, а текст завжди поруч. */
.hh-chip__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }

/* Компактний індикатор статусу поруч із назвою (issues-log #100, Роман
   21.08, скріншот «Онлайн→Головна»): чіп "Зв'язок є" забирав багато місця
   в картці каналу — 6 карток не влазили в один ряд на десктопі. Той самий
   факт (лінк відповідає), тепер крапкою біля назви ресурсу з title-
   підказкою при наведенні мишкою, а не окремим чіпом. Протилежний факт
   (немає відкритої зміни) лишається повноцінним чіпом — попередження
   людина має прочитати текстом, не здогадуватись з кольору крапки. */
.hh-name-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-left: var(--sp-2);
  vertical-align: middle;
  background: var(--text-muted);
}
.hh-name-dot--ok   { background: var(--ok); }
.hh-name-dot--warn { background: var(--warn); }

.hh-chip--ok     { color: var(--ok);     background: var(--ok-quiet);     border-color: var(--ok-border); }
.hh-chip--warn   { color: var(--warn);   background: var(--warn-quiet);   border-color: var(--warn-border); }
.hh-chip--danger { color: var(--danger); background: var(--danger-quiet); border-color: var(--danger-border); }
.hh-chip--info   { color: var(--info);   background: var(--info-quiet);   border-color: var(--info-border); }
/* Комісія ДО нас у рядку таблиці («Склад», колонка власності) — той самий
   тон, що ярличок на фото каталогу (.hh-badge-consignment нижче): одна мова
   для одного стану. Не ok/warn/danger — це не рівень наявності, а «інша
   природа» товару. Раніше екран писав мокапні .own.cons без стилю
   (скан 01.10.2026). */
.hh-chip--consignment { color: var(--accent); background: var(--accent-quiet); }

/* «X: (артист)» / X-канал — у реєстрі «Усі продажі», реєстрі торгових
   документів, картці документа, знижках. Одне правило на всі екрани.
   Було (Роман, 09.09.2026): суцільна заливка --x-moss з молочним текстом —
   щоб X «виділявся». Власник 02.10.2026: темно-оливкова плашка серед
   світлих тонованих чипів «дуже ріже в очі». Тепер той самий тонований
   стиль, що решта чипів (текст + тиха підкладка + тонка рамка, як
   .hh-chip--ok), але з власним мохово-оливковим тоном (--x-chip-*,
   tokens.css, обидві теми): X упізнається відтінком, а не контрастом.
   Відрізняє його від чипа каналу поруч саме тон, тож «одна мохова
   позначка X на клітинку» (trade-documents-registry.js) лишається в силі. */
.hh-chip--x { color: var(--x-chip-text); background: var(--x-chip-bg); border-color: var(--x-chip-border); }

/* Канал-вітрина («Новий сайт») — теплий рожевий тон у колонці «Канал»
   реєстрів і на картці документа (власник, 03.10.2026: «не червоним — це
   не помилка»). Клас ставить лише HH_SALES.storefrontChipClass за ознакою
   каналу channel_storefront (573), не за текстом назви. Шоуруми, події й
   решта онлайн-каналів лишаються нейтральними. Токени — tokens.css,
   обидві теми. */
.hh-chip--storefront { color: var(--storefront-chip-text); background: var(--storefront-chip-bg); border-color: var(--storefront-chip-border); }

/* «Поточний етап» у прогрес-барі стадій (checklist-home-fixes.md, Роман
   06.09.2026, Етап 4.1 — картка корпоративного проєкту з шістьма
   етапами, "поточний підсвічений", той самий вигляд, що мокапів `.ds.on`:
   суцільна брендова плашка, не тон ok/warn/danger — це не сигнал стану,
   а вказівник "ти тут". Не .hh-chip--filter[aria-pressed] — той клас
   інтерактивний вибір фільтра, а тут статична позначка на нередагованому
   ряду стадій. */
.hh-chip--current {
  color: var(--text-on-brand);
  background: var(--surface-brand);
  border-color: transparent;
  font-weight: 600;
}

.hh-chip--filter {
  min-height: 28px;
  background: var(--accent-quiet);
  border-color: var(--info-border);
  color: var(--text);
  cursor: pointer;
}

/* ОБРАНИЙ ФІЛЬТР. Стану не було взагалі: рядок «Усі · Активні · Чернетки»
   виглядав однаково незалежно від того, що ввімкнено, — тобто екран показував
   звужений список і мовчав про те, чим він звужений. Це той самий клас
   помилки, що «порожньо через межі проти порожньо взагалі»: людина бачить
   три позиції з дев'яти й не має способу дізнатись чому.

   Ловиться воно погано саме тому, що нічого не ламає: кліки працюють, список
   змінюється, і поки не спитаєш «а який зараз стоїть», усе виглядає справним.

   Обраний — заливка акцентом, а не просто яскравіша рамка: рамку на
   тьмяному екрані ввечері не видно, і саме на цьому екрані людина найчастіше
   й сидить. */
.hh-chip--filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--weight-bold);
}
.hh-chip--filter:focus-visible {
  outline: var(--focus-w) solid var(--accent);
  outline-offset: 2px;
}
/* СТАТУС, ЯКИЙ МОЖНА ПЕРЕМКНУТИ (реквізит туру/події, instruction-x-tour-
   equipment.md §4.2: «клік на сам статус… з підтвердженням»). Той самий
   .hh-chip із тоном статусу, але <button>: без модифікатора він виглядав
   як read-only чіп («Огляд» туру, 06.10.2026: людина з tours.manage не
   розуміла, що й де клікати). Відмінність від .hh-chip--filter — колір не
   міняється: це все ще статус, просто з дією. Сигнал дії — вказівник,
   рамка кольором статусу на наведенні й фокус-обвідка. */
.hh-chip--action {
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.hh-chip--action:hover:not(:disabled) {
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor inset;
}
.hh-chip--action:focus-visible {
  outline: var(--focus-w) solid var(--accent);
  outline-offset: 2px;
}
.hh-chip--action:disabled { cursor: default; opacity: .6; }
.hh-chip__remove {
  border: 0; background: transparent; color: inherit;
  cursor: pointer; padding: 0 0 0 var(--sp-1);
  font-size: 1rem; line-height: 1;
}

/* Обмеження ширини тексту чіпа-статусу (issue #126, мокап сторінки
   замовлення — статус/оплата/відвантаження можуть мати довгу назву,
   «Частково відвантажено», і в тісному ряду поруч із сумою мають
   лишатись компактними). Повний текст — у title (браузерний тултип на
   наведення й на фокус/тап), .hh-chip лишається `white-space: normal` за
   замовчуванням для всіх інших місць — обрізаємо лише там, де явно
   додано цей модифікатор. */
.hh-chip--clamp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 148px;
  cursor: help;
}

/* Маленький вторинний чіп — канал продажу на реєстрах продаж (issue #716):
   той самий .hh-chip, лише тихіший і дрібніший, бо стоїть поруч із назвою
   документа/метою (час, кількість позицій), а не в правій колонці, де й так
   статус + сума + клієнт. Не .hh-chip--filter (той — інтерактивний вибір
   фільтра, інша семантика й колір) і не новий колір-тон — просто менший
   розмір того самого read-only чіпа. */
.hh-chip--sm {
  padding: 1px var(--sp-2);
  font-size: 11px;
  line-height: 1.3;
  gap: 3px;
}

/* Список чекбоксів (instruction-x-event-form.md §6 «Термінали для
   продажу», instruction-x-event-form-round2.md §2, ОБОВ'ЯЗКОВО) — раніше
   класу взагалі не було в CSS, тож `<label>` лишались inline-елементами й
   зліплювались в один текстовий рядок, що переносився як завгодно (розмір
   екрана вирішував, де саме). За мокапом (.chk-list) — стовпчик, один
   термінал на рядок. */
.hh-checkbox-group { display: flex; flex-direction: column; gap: 2px; }
.hh-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  padding: 5px 2px;
  cursor: pointer;
}
.hh-checkbox input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; margin: 0; }

/* Заголовок картки за docs/01-rules/instruction-design-scale.md §3
   (12px/700/uppercase, tracking .03em) — не голий <h3> (браузерний
   дефолт ~19px/700 без uppercase/tracking) і не .hh-h3 вище (16px/500,
   без uppercase): жоден із наявних класів цій специфікації не відповідає.
   Перший екран, що явно звірявся з цим розділом, — X-подія
   (instruction-x-event-form.md §8). */
.hh-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}

/* Сегментований перемикач на 2-3 варіанти (instruction-x-event-form.md §3,
   «Участь Hygge Hoodie») — не .hh-chip--filter (той для незалежних чипів,
   що вмикаються/вимикаються кожен окремо), тут рівно ОДИН активний із
   набору, як <select>, лише візуально компактніше. Фон дорівнює
   --choco-tint (розділ 2.1 дизайн-коду — тонований стан «вибрано», не
   суцільна заливка), окрім предметно кольорових станів нижче: активний
   пункт сам є фактом про дані (яка саме участь), той самий виняток
   розділу 10 дизайн-коду, що статус-чипи. */
.hh-seg {
  display: inline-flex;
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 2px;
  flex-wrap: wrap;
}
.hh-seg__btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  padding: 4px 9px;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.hh-seg__btn[aria-pressed="true"] { font-weight: var(--weight-bold); }
/* «Не підтверджена» подія (events.participation='unconfirmed', 822, власник
   08.10.2026) — «затушена»: рядок, картка й чип календаря напівпрозорі на
   сайті й у застосунку (app.css вантажить цей файл теж). Клас дає
   HH_EVENT_PARTICIPATION.mutedClass (design/event-participation.js). */
.hh-event--unconfirmed { opacity: .55; }
.hh-seg__btn--warn[aria-pressed="true"]   { background: var(--warn);   color: var(--warn-contrast, #fff); }
.hh-seg__btn--ok[aria-pressed="true"]     { background: var(--ok);     color: var(--ok-contrast, #fff); }
.hh-seg__btn--neutral[aria-pressed="true"] { background: var(--text-faint); color: var(--surface); }
.hh-seg__btn--danger[aria-pressed="true"] { background: var(--danger); color: var(--danger-contrast, #fff); }

/* Компактна кругла позначка «недоступно для редагування зараз» (issue
   #126, мокап — замінює широкий пунктирний бейдж, який раніше займав
   рядок сам). Причина завжди в title: чому саме заблоковано, а не голий
   замок без пояснення (§ «Помилка каже, що робити», docs/ui-rules.md). */
.hh-locked-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-full);
  border: var(--border-w) dashed var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: help;
}

/* Варіант із коротким видимим текстом поруч із замком, коли самого
   символу недостатньо (наприклад блокування збереження форми в цілому) —
   той самий колір/фон, компактний рядок замість круга. */
.hh-locked-mark--wide {
  width: auto;
  border-radius: var(--radius-full);
  padding: 2px var(--sp-2);
  gap: var(--sp-1);
  font-size: var(--size-caption);
  white-space: nowrap;
}

/* На телефоні той самий чіп фільтра займає надто багато місця в і так
   тісному рядку (period/channel/status фільтри одразу під шапкою) —
   desktop-розмір скопійований без мобільного брейкпоінту. Зменшуємо
   padding і min-height ще на крок нижче десктопного (issue #714), лишаючи
   tap target не менше ~24px (нижче HIG для рідких рядів, але тут ряд
   щільний і чіпи — не єдиний спосіб дістатись фільтра). */
@media (max-width: 767px) {
  .hh-chip--filter {
    min-height: 24px;
    padding: 1px var(--sp-2);
    font-size: 10px;
  }
}

/* --------------------------------------------------------------------------
   7. Таблиця

   На десктопі — таблиця. На телефоні та сама розмітка перетворюється на
   список карток: горизонтальний скрол по таблиці даних у полі не працює,
   людина губить, у якому вона рядку.
   -------------------------------------------------------------------------- */

/* ОБГОРТКА ТАБЛИЦІ — ВЛАСНИЙ СКРОЛ І КОНТЕЙНЕР ШИРИНИ (власник,
   29.09.2026, сторінка концерту: «ой йой.. поправ»). До цієї правки тут
   стояло `overflow: hidden`, і таблиця, ширша за картку, просто ЗНИКАЛА
   праворуч: у «Роздано безкоштовно» колонка «Рішення офісу» не було видно
   зовсім, а чип «списано · 369,42 ₴» обрізало посередині. Той самий клас
   поламки власник ловив уже на трьох екранах (issue #916/#917 — сума в
   реєстрі документів, «Дроп FOTL», матриця команди туру), і щоразу
   лікувався точково — власним класом зі `overflow-x: auto` на ОДНІЙ
   обгортці (.hh-docs-table-wrap, .hh-drop-fotl-wrap, .hh-team-matrix-wrap
   нижче). Причина ж спільна, тому й правка тут.

   `overflow-x: auto`, не `visible`: картка лишається межею, таблиця не
   розпирає сторінку — зайве прокручується всередині обгортки. По
   вертикалі — `hidden`, як і було: вертикального скролу в обгортці не
   з'являється, а поведінка висоти не змінюється ні для однієї таблиці
   (та сама пара, що вже на .hh-docs-table-wrap/.hh-team-matrix-wrap). Липкій
   шапці це нічого не змінює: `hidden` так само робив обгортку
   scroll-контейнером (пояснення — над обгорткою акту звіряння нижче).

   `container-type: inline-size` — щоб таблиця знала ширину СВОГО місця,
   а не вікна (правило @container нижче, після @media телефона). */
.hh-table-wrap {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
  container-type: inline-size;
}

.hh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
}

/* Клітинка/заголовок колонки — 9px 12px, текст 12.5px/10px (issue #937,
   docs/design-code-core.md §3/§2): базовий .hh-table досі мав var(--sp-3)
   з усіх боків (12px) і --size-caption/--size-small (12px/13px) — той самий
   клас, що вже приведений локально до цих значень у hh-docs-status-group
   (trade-documents-registry.js, issue #480), лишався неприведеним тут, тож
   усі решта екранів із <table> (screen-products.js, screen-orders.js,
   screen-collections.js та інші) успадковували старіший ритм. */
.hh-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  padding: 9px var(--sp-3);
  text-align: left;
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  border-bottom: var(--border-w) solid var(--border);
  white-space: nowrap;
}

.hh-table td {
  padding: 9px var(--sp-3);
  font-size: 12.5px;
  border-bottom: var(--border-w) solid var(--border-faint);
  vertical-align: middle;
}
.hh-table tbody tr:last-child td { border-bottom: 0; }
.hh-table tbody tr:hover { background: var(--surface-hover); }

/* Рядок, що розгортає деталь по кліку (screen-mkt-today.js, Meta Ads) — той
   самий hh-table, лише курсор каже "тут є ще". */
.hh-table__row--clickable { cursor: pointer; }
/* Рядок, що потребує уваги («Склад»: залишок нижче мінімуму). Тихий
   warn-тон на клітинках, не заливка: сигнал «подивись», не тривога.
   Екран писав .hh-row--warn без стилю (скан 01.10.2026) — рядок нічим не
   відрізнявся, хоча тест казав «позначений». */
.hh-table__row--warn td { background: var(--warn-quiet); }
.hh-table__detail-row td { cursor: default; }

/* Батьківський рядок із кількома підпорядкованими записами (screen-money-
   movements.js — instruction-money.md §1/§3.5: один рух дає кілька записів
   журналу, кожен зі своєю статтею й лінією). НЕ .hh-table__detail-row: та
   пара (row--clickable/detail-row) розгортає ОДИН рядок на colspan із
   вкладеною таблицею всередині — тут підпорядковані рядки лишаються
   рівноправними <tr> в тому самому <tbody>, з РІВНО ТІЄЮ САМОЮ кількістю
   <td>, що й шапка (§3.5, жорстка вимога — рецензія знайшла поламку саме
   на цьому: рядок без узгодженої кількості колонок з'їжджає відносно
   шапки). Клас .hh-table__sub-row, НЕ .split — той самий клас уже зайнятий
   під двоколонкову flex-розкладку екрана деінде (§3.5 прямо називає цю
   поламку й вимагає префіксувати класи рядків таблиці окремо). */
.hh-table__row--split { cursor: pointer; }
.hh-table__row--split td { border-bottom: none; }
.hh-table__sub-row td {
  padding-top: 4px; padding-bottom: 8px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.hh-table__sub-row:last-of-type td { border-bottom: var(--border-w) solid var(--border-faint); }
.hh-table__sub-row .hh-table__indent { padding-left: calc(var(--sp-3) + 14px); }

/* Батьківський рядок БЕЗ розгортання (рядок «Замовлення …» у «Інших
   документах» артиста, design/screen-artists.js — вимога власника
   16.09.2026: «в одній стрічці замовлення і з неї як підрядок
   Видаткова»). Окремий клас, а не .hh-table__row--split: той несе
   cursor:pointer, тобто обіцяє клік, якого тут немає — підрядки видно
   завжди. Спільне з ним лише знята нижня межа: батько й підрядки читаються
   як один блок. */
.hh-table__row--parent td { border-bottom: none; }

/* Числова колонка — праворуч і табличними цифрами. Завжди. */
.hh-table .hh-td--num,
.hh-table .hh-th--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* Дата в клітинці — одним рядком, табличними цифрами. Формат CORE —
   «28-09-2026» з ДЕФІСОМ (design/fmt-date.js), а дефіс для браузера —
   звичайна точка переносу: під тиском ширини автоматична розкладка
   таблиці стискає колонку до «28-», і дата ламається в три рядки
   (сторінка концерту, «Роздано безкоштовно», 29.09.2026; раніше те саме
   на «Дроп FOTL» — .hh-drop-fotl-table td:nth-child(1) нижче). Клас на
   клітинці, а не правило по data-label: підпис колонки — текст, не
   контракт. */
.hh-table .hh-td--date,
.hh-table .hh-th--date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Таблиця видаткових «Продажів» (картка туру, screen-tours.js
   renderXSalesPanel; блок «Документи й витрати» картки події,
   screen-x-event.js documentsTableHtml). «Концерт / Подія» не забирає
   більшу частину ширини (власник 07.10.2026): дата одним рядком першою,
   документ із позначкою «зараховано в іншу подію» — поруч. */
.hh-sale-docs-table .hh-sale-docs-table__event { width: 34%; }
@media (max-width: 767px) {
  /* Неосновний лінк спільної накладної має порожню «Суму» — на картці
     телефону підпис «СУМА» без значення лише займав би рядок. */
  .hh-sale-docs-table.hh-table--responsive td:empty { display: none; }
}

/* Головний текст рядка (назва товару, документа) — не вужчий за ~11em.
   Автоматична розкладка під тиском віддає ширину колонкам із довгим
   max-content (кнопки рішень, коментар) і стискає решту до min-content —
   для назви це найдовше СЛОВО, і «Футболка "Україна - Марки", (сірий)
   L/XL» ставала стовпчиком на п'ять рядків. Мінімум тримає її читабельною;
   якщо разом із ним таблиця не влазить — скролиться в обгортці. */
.hh-table .hh-td--name { min-width: 11em; }

/* Статус-чип у клітинці — пігулка одним рядком (дизайн-код 7.5). Сам
   .hh-chip лишається `white-space: normal` (див. .hh-chip--clamp вище),
   але в таблиці перенесений чип із radius-full стає круглою плямою з
   текстом «спи… · 36… ₴» у три рядки. Одним рядком чип задає колонці
   чесний мінімум, і вона не стискається нижче його ширини. */
.hh-table td .hh-chip { white-space: nowrap; }
/* Довгий статус-текст у клітинці («Відправлення у м. Бровари. Очікуйте
   повідомлення про прибуття» — статус НП, «Внутрішні доставки», власник
   02.10.2026: чип обрізався за край таблиці). Такий чип переносить текст:
   обмежена ширина, крапка зверху першого рядка, заокруглення як у картки,
   а не пігулка — щоб два рядки не стали «плямою». Горизонтального скролу
   таблиці від нього немає. */
.hh-table td .hh-chip.hh-chip--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 240px;
  align-items: flex-start;
  text-align: left;
  border-radius: var(--radius-sm);
}
.hh-table td .hh-chip.hh-chip--wrap .hh-chip__dot { margin-top: 5px; }

/* «Сума FOTL» (design/screen-drop-fotl.js) — розклад товар/послуги на
   кожному рядку (Товар / Послуги / Доставка — окремо, 04.10.2026) через `<br>`
   (fotlAmountCell). `white-space: normal` перекриває успадкований
   nowrap .hh-td--num вище — без нього довгий підпис («Доставка: 80,00 ₴
   (платить одержувач)») не переносився б і розпирав би колонку. Явна
   ширина колонки — нижче, разом з рештою дев'яти (.hh-drop-fotl-table). */
.hh-table .hh-td--drop-amount {
  white-space: normal;
}

/* Горизонтальний скрол реєстру «Дроп FOTL» — той самий прийом, що
   .hh-team-matrix-wrap нижче: спільний .hh-table-wrap до 29.09.2026 ніс overflow:hidden (тепер overflow-x: auto — див. сам клас)
   навмисно (щоб довгий вміст не «втікав» з інших таблиць без попиту), тому
   власний клас на обгортці, а не зміна спільного правила. Десять колонок
   реєстру не влазять на вузькому десктопі/планшеті (вище 767px, де
   .hh-table--responsive сам перетворює таблицю на картки) — без цього
   скролу вони або ламали б верстку сторінки вшир, або мовчки обрізались би
   спільним overflow:hidden. */
.hh-drop-fotl-wrap { overflow-x: auto; }

/* Компактне сальдо FOTL (власник 05.10.2026): один рядок «Сальдо: …» +
   чипи-прапорці + «Акт звіряння →» + «Деталі ▾»; розбивка — дві колонки,
   суми праворуч. На телефоні рядок переноситься, дії — окремим рядком. */
.hh-drop-ledger { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.hh-drop-ledger__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.hh-drop-ledger__title { font-size: var(--size-h3); line-height: var(--lh-h3); font-weight: var(--weight-medium); }
.hh-drop-ledger__flags { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.hh-drop-ledger__flags button.hh-chip { cursor: pointer; }
.hh-drop-ledger__actions { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; font-size: var(--size-small); }
.hh-drop-ledger__table { width: 100%; max-width: 480px; margin-top: var(--sp-2); border-collapse: collapse; font-size: var(--size-small); }
.hh-drop-ledger__table td { padding: 3px 0; border-bottom: var(--border-w) solid var(--border); }
.hh-drop-ledger__table td.hh-num { text-align: right; white-space: nowrap; padding-left: var(--sp-3); }
.hh-drop-ledger__total td { font-weight: var(--weight-medium); border-bottom: 0; }
.hh-drop-ledger__notes { margin: var(--sp-2) 0 0; }
.hh-drop-filters { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.hh-drop-filters button.hh-chip { cursor: pointer; }
.hh-drop-search { margin-bottom: var(--sp-3); }
.hh-drop-search .hh-input { width: 100%; max-width: 520px; }
@media (max-width: 767px) {
  .hh-drop-ledger__actions { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* «Замовити у FOTL» (fotl-stock-tab.js): «оновлено …» + пошук і «Показати
   нулі» в одному рядку; таблиця — власний скрол вшир, як реєстр дропу. */
.hh-fotl-subtabs { margin-bottom: var(--sp-3); }
/* Перемикач «Дорослі · Slim · Дитячі» (06.10.2026) — перше на сторінці
   «Замовити у FOTL»; на телефоні — на всю ширину, сегменти порівну. Число —
   --text-muted (дані, не --text-faint), в обраному — --text; темна тема — ті самі токени. */
.hh-fotl-segments { margin-bottom: var(--sp-2); }
.hh-fotl-segments__item { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.hh-fotl-segments__n { color: var(--text-muted); font-size: var(--size-caption); }
.hh-fotl-segments__item[aria-pressed="true"] { font-weight: 600; }
.hh-fotl-segments__item[aria-pressed="true"] .hh-fotl-segments__n { color: var(--text); }
/* Перемикач + пошук — один рядок під кошиком (десктоп); на телефоні —
   стовпчиком, сегменти на всю ширину, довгий підпис («Інші товари»)
   переноситься в два рядки, а не вилазить за край. */
.hh-fotl-stock-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }
.hh-fotl-stock-bar .hh-fotl-segments { margin-bottom: 0; flex: none; }
.hh-fotl-stock-bar .hh-fotl-stock-tools { flex: 1 1 320px; margin-bottom: 0; flex-wrap: nowrap; }
.hh-fotl-stock-bar .hh-fotl-stock-tools .hh-input { flex: 1 1 200px; min-width: 140px; }
.hh-fotl-stock-bar .hh-fotl-stock-zeros { white-space: nowrap; }
@media (max-width: 767px) {
  .hh-fotl-stock-bar { flex-direction: column; align-items: stretch; }
  .hh-fotl-stock-bar .hh-fotl-stock-tools { flex: none; flex-wrap: wrap; }
  .hh-fotl-stock-bar .hh-fotl-stock-tools .hh-input { flex: 1 1 100%; max-width: none; }
  .hh-fotl-segments { display: flex; width: 100%; }
  /* Чотири сегменти на 343px: підпис і число — двома рядками, однакова висота. */
  .hh-fotl-segments__item { flex: 1 1 0; flex-direction: column; gap: 0; min-height: 44px; padding: 2px; white-space: nowrap; line-height: 1.2; text-align: center; font-size: var(--size-caption); }
}
.hh-fotl-stock-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.hh-fotl-stock-head .hh-caption { margin: 0; }
.hh-fotl-stock-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }
.hh-fotl-stock-tools .hh-input { flex: 1 1 260px; max-width: 520px; }
.hh-fotl-stock-zeros { min-height: 32px; font-size: var(--size-small); }
.hh-fotl-stock-wrap { overflow-x: auto; }
.hh-fotl-stock-table td.hh-td--num, .hh-fotl-stock-table th.hh-td--num { text-align: right; white-space: nowrap; }
/* «Поточний залишок» під числом: кнопка-посилання й стан запиту до FOTL.
   Помилка довга — переноситься (nowrap колонки знімаємо лише для неї). */
/* Мініатюра першого фото позиції FOTL (765): 40×40, сіра заглушка без фото. */
.hh-fotl-stock-product { display: flex; align-items: flex-start; gap: var(--sp-2); }
.hh-fotl-thumb { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken); border: var(--border-w) solid var(--border); }
.hh-fotl-thumb--empty { display: inline-block; }
/* «Нове замовлення на FOTL» (766): прапорець і кількість у рядку залишків,
   панель чернетки над таблицею. */
/* «Залишки FOTL» (власник 06.10.2026): назва — широка колонка, що не
   стискається; код моделі · артикул і колір·розмір — одним дрібним рядком;
   «Доступно» — число + ↻; стан запиту — крапка з підказкою. */
.hh-fotl-stock-cell-product { min-width: 320px; width: 46%; }
.hh-fotl-stock-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hh-fotl-stock-name__title { line-height: var(--lh-small); }
.hh-fotl-meta { color: var(--text-muted); font-size: var(--size-caption); line-height: var(--lh-caption); }
.hh-fotl-stock-name__color { color: var(--text-muted); }
/* Рядок = модель+колір (власник 06.10.2026): розміри — чипи «S 792» з
   залишком; клік кладе розмір у кошик, у кошику чип — степер −/+ з
   тонованим фоном (дизайн-код §2.1, не суцільна заливка). */
.hh-fotl-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hh-fotl-size {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 9px;
  border: var(--border-w) solid var(--border); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--size-caption); line-height: 1.2; white-space: nowrap;
}
.hh-fotl-size__name { font-weight: 600; }
.hh-fotl-size__qty { color: var(--text-muted); }
.hh-fotl-size.is-zero .hh-fotl-size__name, .hh-fotl-size.is-zero .hh-fotl-size__qty { color: var(--text-faint); }
.hh-fotl-size--add { cursor: pointer; }
.hh-fotl-size--add:hover { border-color: var(--accent); }
.hh-fotl-size--add:hover .hh-fotl-size__name { color: var(--accent); }
.hh-fotl-size.is-in-cart { padding: 1px 2px; background: var(--accent-quiet); border-color: var(--accent); }
.hh-fotl-size__cart { color: var(--accent); font-weight: 700; }
.hh-fotl-size__step {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--accent); font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.hh-fotl-size__step:hover { background: var(--surface-hover, var(--surface-sunken)); }
.hh-fotl-avail { display: inline-flex; align-items: center; gap: var(--sp-1); justify-content: flex-end; }
.hh-fotl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted); border: var(--border-w) solid var(--border);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.hh-fotl-icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.hh-fotl-icon-btn.is-busy { animation: hh-fotl-spin 1s linear infinite; }
@keyframes hh-fotl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hh-fotl-icon-btn.is-busy { animation: none; opacity: .6; } }
.hh-fotl-live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hh-fotl-live-dot--ok { background: var(--ok); }
.hh-fotl-live-err { color: var(--warn); font-size: var(--size-caption); white-space: nowrap; }
.hh-fotl-stepper { display: inline-flex; align-items: center; border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-full); flex: none; }
.hh-fotl-stepper__btn { width: 30px; height: 30px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; cursor: pointer; }
.hh-fotl-stepper__btn:disabled { color: var(--text-faint); cursor: default; }
.hh-fotl-stepper__val, .hh-fotl-stepper__qty { min-width: 28px; text-align: center; font-size: var(--size-small); }
.hh-fotl-stepper__qty { width: 44px; border: 0; background: transparent; color: var(--text); padding: 0; -moz-appearance: textfield; }
.hh-fotl-stepper__qty::-webkit-outer-spin-button, .hh-fotl-stepper__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Закріплений кошик «Замовлення на FOTL» над таблицею. */
.hh-fotl-order-embed { position: sticky; top: var(--sp-2); z-index: 6; margin-bottom: var(--sp-3); }
.hh-fotl-cart { display: flex; flex-direction: column; gap: var(--sp-2); max-height: min(70vh, 640px); overflow-y: auto; box-shadow: var(--shadow-raised); }
.hh-fotl-cart__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.hh-fotl-cart__head .hh-btn { margin-left: auto; }
.hh-fotl-cart__others { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.hh-fotl-cart__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hh-fotl-cart__line { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px 28px; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) 0; border-bottom: var(--border-w) solid var(--border); }
.hh-fotl-cart__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--size-small); }
.hh-fotl-cart__name .hh-chip { align-self: flex-start; }
.hh-fotl-cart__sum { text-align: right; white-space: nowrap; font-size: var(--size-small); }
.hh-fotl-cart__remove { width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-full); }
.hh-fotl-cart__remove:hover { color: var(--danger); }
.hh-fotl-cart__total { text-align: right; font-size: var(--size-small); }
@media (max-width: 767px) {
  .hh-fotl-stock-cell-product { min-width: 0; width: auto; }
  /* Картка: назва — на всю ширину без підпису колонки. */
  .hh-table--responsive td.hh-fotl-stock-cell-product { display: block; text-align: left; }
  .hh-table--responsive td.hh-fotl-stock-cell-product::before { display: none; }
  .hh-fotl-cart__line { grid-template-columns: minmax(0, 1fr) auto; }
  .hh-fotl-cart__sum { grid-column: 1; text-align: left; }
  .hh-fotl-cart__remove { justify-self: end; }
  .hh-fotl-order-embed { top: 0; }
  .hh-fotl-cart { max-height: 55vh; }
}
/* Вікно «Сформувати замовлення у FOTL» картки замовлення (782, власник
   06.10.2026): широке й горизонтальне — ліворуч позиції, праворуч доставка
   й оплата, дії в підвалі; на 1440×900 без внутрішнього скролу. Телефон
   (< 768px) — одна колонка (стандартний .hh-modal знизу). */
.hh-modal.hh-modal--fotl-order { max-width: min(1160px, 96vw); max-height: 92vh; }
.hh-modal--fotl-order .hh-modal__head { padding: 13px 14px; }
.hh-modal--fotl-order .hh-modal__body { padding: 13px 14px; }
.hh-modal__foot.hh-fotl-order-foot { flex-wrap: wrap; align-items: center; padding: 10px 14px; }
.hh-fotl-order-status { margin-right: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--size-small); color: var(--text-muted); max-width: 520px; }
.hh-fotl-order-status[hidden] { display: none; }
.hh-fotl-order-status .hh-spinner { flex: none; width: 14px; height: 14px; }
.hh-fotl-order-layout { display: flex; flex-direction: column; gap: 9px; }
.hh-fotl-order-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hh-fotl-order-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.hh-fotl-order-col > .hh-overline, .hh-fotl-order-col > .hh-caption { margin: 0; }
.hh-fotl-order-table { width: 100%; table-layout: fixed; }
.hh-fotl-order-table__qty { width: 96px; }
.hh-fotl-order-table__stock { width: 132px; }
.hh-fotl-order-table__sum { width: 92px; }
.hh-fotl-order-table td, .hh-fotl-order-table th { padding: 8px 10px; vertical-align: top; }
.hh-fotl-order-table tfoot td { border-top: var(--border-w) solid var(--border); }
.hh-fotl-order-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hh-fotl-order-table .hh-fotl-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-fotl-order-table .hh-chip { margin-top: 3px; }
.hh-fotl-order-table td[data-fotl-order-line-stock] .hh-fotl-meta { white-space: normal; }
.hh-fotl-order-col .hh-fotl-order-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; }
.hh-fotl-order-ware { min-height: 0; resize: none; line-height: 1.35; }
.hh-fotl-order-confirm__btns { display: inline-flex; gap: 7px; margin-top: 7px; }
@media (max-width: 767px) {
  .hh-modal.hh-modal--fotl-order { max-width: none; max-height: 90vh; }
  .hh-fotl-order-grid { grid-template-columns: minmax(0, 1fr); }
  .hh-fotl-order-col .hh-fotl-order-fields { grid-template-columns: minmax(0, 1fr); }
  .hh-fotl-order-status { flex-basis: 100%; max-width: none; }
  /* Телефон: підвал компактний — «Оформити» на всю ширину першою, «Перевірити»
     й «Скасувати чернетку» в один ряд; «Закрити» — хрестик у шапці. */
  .hh-modal__foot.hh-fotl-order-foot { flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .hh-modal__foot.hh-fotl-order-foot .hh-btn { width: auto; flex: 1 1 40%; }
  .hh-modal__foot.hh-fotl-order-foot .hh-btn--primary { order: -1; flex-basis: 100%; }
  .hh-modal__foot.hh-fotl-order-foot .hh-fotl-order-status { order: -2; }
  .hh-modal__foot.hh-fotl-order-foot [data-order-fotl-close] { display: none; }
  .hh-table--responsive.hh-fotl-order-table td:first-child { display: block; text-align: left; }
  .hh-table--responsive.hh-fotl-order-table td:first-child::before { display: none; }
  .hh-fotl-order-table { table-layout: auto; }
  .hh-fotl-order-table .hh-fotl-meta { white-space: normal; }
}
.hh-avail__refresh { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0 4px; border-radius: var(--radius-full); font-size: var(--size-small); line-height: 1; min-width: 24px; min-height: 24px; }
.hh-avail__refresh:hover { color: var(--text); }
.hh-avail__refresh[disabled] { opacity: .5; cursor: progress; }
.hh-fotl-order-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-2) var(--sp-3); }
/* «Додаткові послуги» FOTL — галочки у дві колонки на широкому, в одну на телефоні. */
.hh-fotl-order-srv { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px var(--sp-3); }
.hh-fotl-order-srv legend { padding: 0; margin-bottom: 4px; }
.hh-fotl-order-fields__wide { grid-column: 1 / -1; }
.hh-fotl-order-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hh-fotl-order-error, .hh-fotl-order-ok, .hh-fotl-order-confirm {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-size: var(--size-small);
  border: var(--border-w) solid var(--border);
}
.hh-fotl-order-error { color: var(--danger); background: var(--danger-quiet, var(--surface-sunken)); border-color: var(--danger-border, var(--border)); }
.hh-fotl-order-ok { color: var(--ok); background: var(--ok-quiet, var(--surface-sunken)); border-color: var(--ok-border, var(--border)); }
.hh-fotl-order-confirm { background: var(--surface-sunken); }
.hh-fotl-order-warn { color: var(--warn); margin: 0; }
.hh-fotl-order-diff { border-collapse: collapse; font-size: var(--size-small); }
.hh-fotl-order-diff th, .hh-fotl-order-diff td { padding: 3px var(--sp-2); border-bottom: var(--border-w) solid var(--border); text-align: left; }
.hh-fotl-order-diff .hh-num { text-align: right; white-space: nowrap; }
.hh-fotl-stock-table .hh-cell-stack__sub { font-size: var(--size-caption); }
/* Ціна закупки групами «S–2XL · 127,00 ₴» (власник 07.10.2026): рядок на
   ціну, рядок не переноситься. */
.hh-fotl-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hh-fotl-prices__row { white-space: nowrap; font-size: var(--size-small); }
.hh-fotl-prices__sizes { color: var(--text-muted); }
/* Наш товар — назва в один рядок із трикрапкою, повна — у підказці. */
.hh-fotl-ours, .hh-fotl-ours .hh-cell-stack { min-width: 0; max-width: 100%; }
.hh-fotl-ours__name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Ширини колонок фіксовані (власник 07.10.2026: «колонка не розтягувалась»):
   table-layout: fixed — довгий вміст не розпирає колонку; решту ширини
   бере «Товар FOTL». Лише десктоп: на телефоні таблиця — картки. */
@media (min-width: 768px) {
  .hh-fotl-stock-table { table-layout: fixed; width: 100%; min-width: 860px; }
  .hh-fotl-stock-table .hh-fotl-col-product { width: auto; }
  .hh-fotl-stock-table .hh-fotl-col-avail { width: 104px; }
  .hh-fotl-stock-table .hh-fotl-col-price { width: 160px; }
  .hh-fotl-stock-table .hh-fotl-col-retail { width: 112px; }
  .hh-fotl-stock-table .hh-fotl-col-ours { width: 180px; }
  .hh-fotl-stock-table td { overflow: hidden; }
  .hh-fotl-stock-table td.hh-fotl-stock-cell-product { min-width: 0; width: auto; }
}

/* Дроп FOTL: ФІКСОВАНА ширина КОЖНОЇ з десяти колонок (власник,
   27.09.2026, другий раунд — «геть не ок»: одна звужена колонка суми
   не рятувала решту дев'яти від «гуляння» шириною залежно від вмісту
   конкретного рядка — довгий телефон/ТТН в одному рядку розпирав
   колонку ширшою, ніж у сусідніх рядків). table-layout:fixed бере
   ширину з ПЕРШОГО рядка (<thead> тут перший), тому правила — на
   th:nth-child, td успадковує ту саму ширину автоматично; довгий
   текст переноситься в межах своєї колонки (white-space:normal лишається
   на .hh-cell-stack і .hh-td--drop-amount вище), не тягне сусідні. На
   телефоні (.hh-table--responsive → картки, <768px) table-layout і
   width на table-комірках не діють — стовпці там уже не таблиця. */
.hh-drop-fotl-table { table-layout: fixed; }
.hh-drop-fotl-table th:nth-child(1) { width: 92px; }
/* 2: «Замовлення у CORE» (04.10.2026, власник) — НАШІ дані (номер замовлення,
   його статус, видаткова) стоять одразу після Дати, далі колонки FOTL. */
.hh-drop-fotl-table th:nth-child(2) { width: 160px; }
.hh-drop-fotl-table th:nth-child(3) { width: 108px; }
.hh-drop-fotl-table th:nth-child(4) { width: 168px; }
.hh-drop-fotl-table th:nth-child(5) { width: 160px; }
/* «Оплата» — по ширині чіпа «Передоплата», найдовшого статусу оплати
   (Роман, 27.09.2026), не ширша: під чипом і так є другий рядок
   (сума/стан накладеного), що переноситься сам. */
.hh-drop-fotl-table th:nth-child(6) { width: 104px; }
.hh-drop-fotl-table th:nth-child(7) { width: 104px; }
.hh-drop-fotl-table th:nth-child(8) { width: 140px; }
/* Чипи в клітинках реєстру переносяться в межах колонки, а не налізають на
   сусідню («Розбіжність кількості з 1С», «Документа 1С не знайдено»):
   тип пігулки зберігаємо для коротких, довгі — прямокутник із переносом. */
.hh-drop-fotl-table td .hh-chip {
  white-space: normal; overflow-wrap: anywhere; max-width: 100%;
  align-items: flex-start; text-align: left; border-radius: var(--radius-sm);
}
.hh-drop-fotl-table td .hh-chip .hh-chip__dot { margin-top: 5px; }
/* Картка «Дроп FOTL» — двоколонкова (.hh-doc-layout): права колонка — блоки
   .hh-doc-panel, нижній ряд лівої (зіставлення, форми) без подвійного
   відступу зверху: проміжок дає сама сітка. */
.hh-drop-card-rest > :first-child { margin-top: 0 !important; }
.hh-drop-card-layout .hh-doc-panel .hh-caption { margin: 2px 0 4px; }
/* Дата — суцільним рядком («26-09-2026»), не трьома через дефіси
   (Роман, 27.09.2026: вузька колонка + звичайний white-space ламали
   рядок саме на «-» — типова точка переносу в браузері за замовчуванням). */
.hh-drop-fotl-table td:nth-child(1) { white-space: nowrap; }

/* «Внутрішні доставки» (design/screen-internal-deliveries.js): ФІКСОВАНІ
   ширини колонок (власник, 02.10.2026: «зафіксуй ширину колонок, щоб
   такого не було»). Після появи колонки «Для туру» авто-розкладка стиснула
   «Статус НП» до ~110px: чип статусу несе overflow-wrap: anywhere
   (.hh-chip--wrap вище), а з ним мінімальна ширина клітинки — ОДНА
   літера, тож браузер забирав у неї ширину першою, і чип ламав слова
   посеред («Відпра/влення», «прибут/тя»). table-layout: fixed бере ширини
   з <colgroup> (класи нижче), вміст на них уже не впливає: у колонці
   статусу 200px слова переносяться цілими, а anywhere лишається лише для
   токена, довшого за саму колонку.
   «Від кого» і «Кому» — без ширини: ділять залишок порівну; min-width
   таблиці тримає їх не вужчими за ~150px, а вужче місце дає
   горизонтальний скрол .hh-table-wrap, не стискання колонок.

   ШІСТЬ КОЛОНОК (власник 02.10.2026: номер ТТН обрізаний зліва,
   «Прибрати з внутрішніх» — справа). Мінімум 1280px дорівнював
   --content-max, тож разом із полями сторінки таблиця НІКОЛИ не влазила
   й скролилась. «Напрямок», «Що в посилці» й «Для туру» переїхали в
   інші клітинки, і мінімум тепер 950px: вікно 1280px мінус бічне меню
   (248) і поля сторінки (2 × 32) лишає 966px — без скролу; «Від
   кого»/«Кому» при цьому не вужчі за 140px. Ширини — живий замір
   02.10.2026 (шрифт 12.5/13px, поля клітинки 2 × 12px). */
.hh-idl-table { table-layout: fixed; min-width: 950px; }
/* «Від кого»/«Кому» — без власної ширини (auto): ділять залишок. */
.hh-idl-table .hh-idl-col--party { width: auto; }
/* 14 цифр ТТН ≈ 123px + поля; «додано вручну» переноситься під номер. */
.hh-idl-table .hh-idl-col--ttn { width: 160px; }
/* «30-09-2026» ≈ 71px + поля. */
.hh-idl-table .hh-idl-col--date { width: 100px; }
.hh-idl-table .hh-idl-col--status { width: 200px; }
/* «Прибрати з внутрішніх» одним рядком: кнопка sm ≈ 184px + поля. */
.hh-idl-table .hh-idl-col--act { width: 210px; }
/* Номер ТТН — завжди цілим рядком: не рветься й не обрізається. */
.hh-idl-table .hh-idl-ttn { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Тур / подія під адресою в «Кому» — відступ від адреси. */
.hh-idl-table .hh-idl-tour { margin-top: var(--sp-1); }
/* «ⓘ була адреса» (694): стара адреса отримувача після переадресації. */
.hh-idl-table .hh-idl-old-address > summary { cursor: pointer; list-style: none; }
.hh-idl-table .hh-idl-old-address > summary::-webkit-details-marker { display: none; }
.hh-idl-table .hh-idl-old-address[open] > div { border-left: var(--border-w) solid var(--border); padding-left: var(--sp-2); margin-top: var(--sp-1); }
/* Адреси, імена й опис вантажу — переносом по словах; довгий токен без
   пробілів (адреса «вул.Шевченка,12/3») — у межах своєї колонки. */
.hh-idl-table td { overflow-wrap: break-word; word-break: normal; }
/* Чип статусу: лише між словами; max-width 240px спільного правила тут
   ширший за колонку, тож межею стає сама клітинка. */
.hh-idl-table td .hh-chip.hh-chip--wrap { word-break: normal; max-width: 100%; }
/* Будь-який інший чип у фіксованій колонці («⚠ Увага! Не той Миколаїв…»,
   «наш телефон, невідома адреса — створити точку →» у «Від кого»/«Кому»)
   теж переноситься в межах клітинки: спільне «чип у клітинці — nowrap»
   (вище) з fixed-розкладкою не розширює колонку, а наповзає на сусідню. */
.hh-idl-table td .hh-chip { white-space: normal; max-width: 100%; word-break: normal; border-radius: var(--radius-sm); text-align: left; }
/* Дата НП — одним рядком («02-10-2026»): дефіс — типова точка переносу
   браузера (той самий злам, що в «Дроп FOTL» 27.09.2026). */
.hh-idl-table td[data-np-date] { white-space: nowrap; }
/* «Гроші → Виписка банку», колонка «Коли» (Роман, 10.10.2026: «розшир колонку
   дата, щоб було видно повну дату без переносу»). Дата дд-мм-рррр має дефіси —
   браузер переносив по них («10-10-» / «2026»). nowrap + мінімальна ширина на
   десктопі; у мобільній розкладці (td — пара «підпис: значення») значення теж
   в один рядок. */
.hh-table th.hh-bank-tx-date, .hh-table td.hh-bank-tx-date { white-space: nowrap; min-width: 7em; }
/* Під датою — час ГГ:ХХ за Києвом дрібним приглушеним рядком (10.10.2026). */
.hh-bank-tx-when { display: inline-flex; flex-direction: column; gap: 1px; }
.hh-bank-tx-time { font-size: 11px; color: var(--text-muted); }
@media (max-width: 767px) {
  .hh-table--responsive td.hh-bank-tx-date { white-space: nowrap; min-width: 0; }
  .hh-table--responsive td.hh-bank-tx-date .hh-bank-tx-when { align-items: flex-end; }
}
/* Картка рядка виписки (власник, 10.10.2026: «завелика й розріджена»).
   Сума й чип стану — в одному рядку заголовка. Факти — «підпис над
   значенням» у дві колонки; колонки — від ширини КОНТЕЙНЕРА (той самий
   прийом, що .hh-facts): вужче ~456px — одна. Призначення — абзацом на всю
   ширину, «Звірено з» — одним рядком під тонкою лінією. */
.hh-bt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: var(--sp-3); row-gap: var(--sp-1); }
.hh-bt-head__op { flex-basis: 100%; margin: 0; }
.hh-bt-card { padding: var(--sp-3) var(--sp-4); }
.hh-bt-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(200px, (100% - var(--sp-4)) / 2), 1fr));
  column-gap: var(--sp-4); row-gap: var(--sp-2);
}
.hh-bt-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hh-bt-fact--wide { grid-column: 1 / -1; }
.hh-bt-fact__k { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.hh-bt-fact__v { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hh-bt-fact__v .hh-code { font-size: 11px; }
.hh-bt-fact__sub { display: block; font-size: 11px; color: var(--text-muted); }
.hh-bt-purpose {
  margin: var(--sp-2) 0 0; font-size: var(--size-small); color: var(--text-muted);
  overflow-wrap: anywhere;
}
.hh-bt-matched {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--border-w) solid var(--border-faint);
  font-size: var(--size-small); overflow-wrap: anywhere;
}
.hh-bt-matched .hh-bt-fact__k { margin-right: var(--sp-1); }
/* «Що покрила ця виплата» — рядок-посилання (a.hh-list__item): дата з
   часом | за що (замовлення/подія/шоурум) + чек і каса | сума | ›.
   Щільніше за типовий рядок списку (60px). */
.hh-bt-covers .hh-bt-cover { min-height: 0; padding: var(--sp-2) var(--sp-3); align-items: flex-start; }
.hh-bt-cover__when { display: inline-flex; flex-direction: column; gap: 1px; flex: none; min-width: 6.5em; white-space: nowrap; font-size: var(--size-small); }
.hh-bt-cover .hh-list__title { font-size: var(--size-small); }
.hh-bt-cover__go { flex: none; color: var(--text-faint); }
a.hh-bt-cover:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
@media (max-width: 479px) {
  .hh-bt-covers .hh-bt-cover { flex-wrap: wrap; column-gap: var(--sp-2); }
  .hh-bt-cover__when { flex-direction: row; gap: var(--sp-1); min-width: 0; color: var(--text-muted); font-size: 11px; flex-basis: 100%; }
  .hh-bt-cover .hh-list__body { flex: 1 1 0; }
}
/* «Прибрати з внутрішніх» — дія, що може стати у два рядки у своїй
   колонці (спільний .hh-btn — nowrap). */
.hh-idl-table td .hh-btn { white-space: normal; text-align: left; max-width: 100%; }
/* Телефон: таблиця — картки (.hh-table--responsive), мінімальна ширина
   таблиці там розпирала б картку вбік. Те саме для вузького контейнера —
   у спільному блоці @container (max-width: 479px) нижче. */
/* Вузький десктоп (вікно ~1100px: місця під таблицю ~790px). Мінімум 950
   дав би скрол — і знову обрізану справа кнопку. Тут: статус трохи
   вужчий, а «Прибрати з внутрішніх» — у два рядки в межах клітинки
   (перенос — правило .hh-btn вище). Стоїть ДО @media телефона нижче:
   там картка скидає min-width у 0, і це скидання має перемогти. */
@container (min-width: 480px) and (max-width: 949px) {
  .hh-idl-table { min-width: 780px; }
  .hh-idl-table .hh-idl-col--ttn { width: 150px; }
  .hh-idl-table .hh-idl-col--status { width: 170px; }
  .hh-idl-table .hh-idl-col--act { width: 130px; }
}
@media (max-width: 767px) { .hh-idl-table { min-width: 0; } }

/* Таблиця «Акт звіряння» (design/screen-reconciliation-act.js) — НЕ
   .hh-table-wrap + доданий клас, як .hh-drop-fotl-wrap вище: тут річ не
   лише в горизонтальному скролі, а в тому, що ЖОДЕН overflow ≠ visible на
   найближчому предку sticky-нащадка не сумісний із «шапка тримається під
   час прокрутки сторінки».

   ДВА попередні PR тут помилялись, і обидва рази — бо перевіряли лише
   текст CSS-правила, не живий рендер:
   - PR #2990 (не змерджений) перевірив лише, що правило
     `.hh-table thead th { position: sticky; top: 0 }` присутнє у файлі, і
     визнав задачу виконаною — але живий скріншот власника показав, що
     шапка акту НЕ тримається під час прокрутки.
   - PR #2992 (змерджено) прибрав саме значення `overflow: hidden` (на
     ту мить — правильний підозрюваний) і поставив на цей клас
     `overflow-x: auto; overflow-y: visible`, а тест перевіряв лише
     відсутність рядка `overflow(-y)?: hidden` у правилі. Це теж НЕ
     виправило баг: координатор особисто перевірила в реальному Chrome на
     статичній HTML-репродукції (не лише в jsdom/vm, які взагалі не
     рахують layout) — з `overflow-x: auto` (як у #2992) шапка так само не
     липне при прокрутці сторінки (скріншот на рядках 13-59: жовтий
     заголовок зникає з екрана). Спробували й запропонований у рев'ю
     `overflow-y: clip` замість `visible` — теж не рятує. Спрацював лише
     контроль без жодного `overflow`-правила взагалі (ні `-x`, ні `-y`):
     там заголовок дійсно залипає (рядки 40-59, заголовок видимий угорі).

   Причина універсальна (CSS Overflow Module, не залежить від конкретного
   не-`visible` значення): якщо в найближчого предка sticky-елемента
   overflow ≠ visible (auto, hidden, scroll, clip — байдуже), цей предок
   стає «scroll ancestor» для sticky-позиціонування. Сам предок не
   скролиться — його висота дорівнює вмісту, скролиться сторінка навколо
   нього — тож sticky «прилипає» відносно контейнера, який фактично
   ніколи не рухається, і візуально шапка взагалі не тримається.

   Тому тут — фікс, підтверджений живою перевіркою в браузері: на
   `.hh-reconciliation-table-wrap` НЕМАЄ жодної властивості `overflow`
   (ні `overflow`, ні `overflow-x`, ні `overflow-y`) — лишаються лише
   border/radius/background, які раніше давав .hh-table-wrap. Горизонтальний
   скрол свідомо не робимо, на відміну від .hh-drop-fotl-wrap: акт має
   РІВНО 5 колонок (Дата, Операція, Збільшення боргу, Зменшення боргу,
   Баланс — універсальна сутність, PR #2971), а .hh-table--responsive вже
   ховає <thead> нижче 768px (перетворює рядки на картки, коментар вище
   ~рядок 1511) — на відміну від «Дроп FOTL» (10 колонок), де горизонтальний
   скрол справді потрібен і там немає одночасної вимоги вертикального
   sticky. Якщо на вузьких десктопних вікнах (768–900px) 5 колонок
   все ж не влазять — прийнятний компроміс (скрол самої сторінки чи
   невеликий перенос тексту): sticky по вертикалі власник попросив прямо,
   і він важливіший. */
.hh-reconciliation-table-wrap {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
/* Липка шапка акту — ПІД шапкою застосунку (власник 29.09.2026: «шапка
   таблиці не тримається»). Причина була не в overflow (його тут уже
   немає, див. вище), а в `top: 0` спільного .hh-table thead th: сторінку
   прокручує документ, а .hh-topbar (shell.css) сама sticky з top:0 і
   z-index var(--z-nav)=20 > var(--z-sticky)=10 — тож заголовок таблиці
   прилипав рівно ПІД непрозору шапку застосунку й був невидимий. Живий
   замір 1280px до правки: th.top = 0, висота .hh-topbar = 56px = рівно
   var(--topbar-h) (tokens.css, той самий токен, яким shell.css ставить
   top бічного меню). Тому top — цей токен, не число навмання.
   Фон th — непрозорий var(--surface) зі спільного правила (обидві теми,
   tokens.css): рядки під ним не просвічують.
   На телефоні (<768px) .hh-table--responsive ховає <thead> (картки) —
   липнути нема чому, горизонтального скролу тут немає. */
.hh-reconciliation-table thead th {
  top: var(--topbar-h);
  /* Двохрядкові «Збільшення / боргу» — щільно, як один підпис; успадкований
     інтерліньяж body розводив два слова, ніби це дві різні мітки. */
  line-height: 1.3;
}
/* Ширини колонок (власник 29.09.2026): «Збільшення / боргу» і «Зменшення /
   боргу» — двома рядками (<br> у розмітці; спільний nowrap на th
   лишається, щоб слово не рвалось), суми праворуч tabular-nums і nowrap —
   уже з .hh-td--num. `width: 1%` на th у звичайному (auto) layout
   стискає колонку до її найширшого непереносного вмісту (сума «146 536,97 ₴»,
   дата «19-02-2026»), а всю решту ширини таблиці забирає «Операція» —
   єдина колонка без обмеження. Дата — nowrap: у вузькій колонці браузер
   інакше ламав «19-02-2026» на дефісі в два рядки. Баланс — так само
   компактний: у підвалі там «Ми винні 1 234,00 ₴» з nowrap, він і задає
   ширину. */
.hh-reconciliation-table th:not(:nth-child(2)) { width: 1%; }
.hh-reconciliation-table td:first-child { white-space: nowrap; }
/* Рядок «Корекція балансу» в акті (власник 27.09.2026: «в самій таблиці в
   хронології він має бути підсвіченим іншим кольором») — з першого погляду
   видно, що це не операція, а точка, з якої акт рахує. Інформаційний тон
   (--info-quiet + смуга --info зліва), не --warn: корекція — не проблема.
   Токени мають значення для обох тем (tokens.css), тож окремого правила
   для світлої теми не треба. Фон і на <tr>, і на <td>: на телефоні
   (.hh-table--responsive → картка) відступи рядка лежать на <tr>, і без
   фону там картка була б підсвічена «смугами». Hover не гасить підсвітку. */
.hh-table tbody tr.hh-reconciliation-row--opening,
.hh-table tbody tr.hh-reconciliation-row--opening:hover,
.hh-table tbody tr.hh-reconciliation-row--opening > td { background: var(--info-quiet); }
.hh-table tbody tr.hh-reconciliation-row--opening > td:first-child { box-shadow: inset 3px 0 0 var(--info); }
@media (max-width: 767px) {
  .hh-table--responsive tbody tr.hh-reconciliation-row--opening { box-shadow: inset 3px 0 0 var(--info); }
  .hh-table--responsive tbody tr.hh-reconciliation-row--opening > td:first-child { box-shadow: none; }
}

/* «Підтвердити баланс» в акті звіряння (755, власник 05.10.2026).
   Кнопка біля кінцевого сальдо — іконка без тексту: кружечок з галочкою в
   контурі тихим кольором; після підтвердження — зелена галочка (заповнене
   коло), при розбіжності — червона. Рядок підтвердження — тоном ok (як
   корекція — тоном info), скасований — закреслений і приглушений. Токени
   мають значення в обох темах. */
/* Меню «Дії ▾» акту звіряння (власник 06.10.2026) — спільний .hh-menu;
   ширше за типові 200px, щоб «Показати попередній квартал · з …» не
   ламався на три рядки; пункт-посилання (CSV) — без підкреслення, як
   решта пунктів. На телефоні — не ширше екрана, пункти під палець. */
[data-ra-actions] .hh-menu__list { min-width: 280px; }
[data-ra-actions] .hh-menu__item { white-space: nowrap; line-height: var(--lh-small); }
[data-ra-actions] a.hh-menu__item { text-decoration: none; color: var(--text); }
@media (max-width: 767px) {
  [data-ra-actions] .hh-menu__list { min-width: min(300px, calc(100vw - 32px)); }
  [data-ra-actions] .hh-menu__item { min-height: 44px; display: flex; align-items: center; }
}
.hh-ra-closing { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); white-space: nowrap; }
.hh-ra-confirm-btn { width: 28px; height: 28px; margin: -6px -4px -6px 0; color: var(--text-muted); }
.hh-ra-confirm-btn svg { width: 18px; height: 18px; }
.hh-ra-confirm-btn--ok,
.hh-ra-confirm-btn--ok:hover:not(:disabled) { color: var(--ok); }
.hh-ra-confirm-btn--ok svg circle { fill: var(--ok); stroke: var(--ok); }
.hh-ra-confirm-btn--ok svg path { stroke: var(--surface); stroke-width: 2.5; }
.hh-ra-confirm-btn--drift,
.hh-ra-confirm-btn--drift:hover:not(:disabled) { color: var(--danger); }
@media (max-width: 767px) {
  .hh-ra-confirm-btn { width: 40px; height: 40px; margin: -10px -10px -10px 0; }
}
.hh-ra-check { width: 12px; height: 12px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hh-ra-confirm-info {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-3) auto;
  max-width: 420px;
  padding: var(--sp-3);
  border: var(--border-w) solid var(--ok-border);
  border-radius: var(--radius);
  background: var(--ok-quiet);
  font-size: var(--size-small);
}
.hh-ra-confirm-info--drift { border-color: var(--danger-border); background: var(--danger-quiet); }
.hh-ra-confirm-info__title { margin: 0 0 var(--sp-2); font-weight: var(--weight-medium); color: var(--text); }
.hh-ra-confirm-info__list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.hh-ra-confirm-info__list dt { color: var(--text-muted); }
.hh-ra-confirm-info__list dd { margin: 0; overflow-wrap: anywhere; }
.hh-ra-drift-rows ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.hh-ra-drift-rows li { margin: 2px 0; overflow-wrap: anywhere; }
.hh-table tbody tr.hh-reconciliation-row--confirmed,
.hh-table tbody tr.hh-reconciliation-row--confirmed:hover,
.hh-table tbody tr.hh-reconciliation-row--confirmed > td { background: var(--ok-quiet); }
.hh-table tbody tr.hh-reconciliation-row--confirmed > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.hh-table tbody tr.hh-reconciliation-row--cancelled > td { color: var(--text-muted); }
.hh-table tbody tr.hh-reconciliation-row--cancelled .hh-ra-op { text-decoration: line-through; }
@media (max-width: 767px) {
  .hh-table--responsive tbody tr.hh-reconciliation-row--confirmed { box-shadow: inset 3px 0 0 var(--ok); }
  .hh-table--responsive tbody tr.hh-reconciliation-row--confirmed > td:first-child { box-shadow: none; }
}

/* ==========================================================================
   Акт звіряння — телефон (власник 06.10.2026, скріншот акту FOTL на 375px:
   «Не оптимізовано»). Блок цілком тут — інші правки components.css його
   не чіпають. Лише `@media screen and (max-width: 767px)`: десктоп без змін,
   і папір (html.hh-printing-act, А4 вужчий за 768px) сюди НЕ потрапляє —
   там лишається таблиця з блоку друку нижче.
   - шапка: менші заголовки, «Дії ▾» в одному рядку з назвою; чіпи періоду
     одним рядком зі своїм горизонтальним скролом (сторінка не скролиться);
   - «Історія корекцій»: текст на всю ширину, «Редагувати / Видалити» —
     малими кнопками рядком під ним; довгий коментар — 3 рядки й «Ще»;
   - рядок акту — компактна картка: дата й непорожня сума зі знаком першим
     рядком, операція (і чипи під нею) на всю ширину, баланс — тихим
     «Баланс …»; порожні суми сховані;
   - «Показати попередній квартал» — дрібним.
   Запас під «?» (.hh-ask-core-fab) уже дає .hh-shell__main (shell.css).
   ========================================================================== */
.hh-ra-chips { display: contents; }
.hh-ra-hist__more { display: none; }
@media screen and (max-width: 767px) {
  .hh-ra-head { margin-bottom: var(--sp-1); }
  .hh-ra-head .hh-section-title { font-size: 15px; line-height: 20px; }
  .hh-ra-party-head { flex-wrap: nowrap; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
  .hh-ra-party-head .hh-h1 { min-width: 0; font-size: 17px; line-height: 22px; overflow-wrap: anywhere; }
  .hh-ra-party-head [data-ra-actions] { flex: none; }
  .hh-ra-party-head [data-act="ra-actions-toggle"] { min-height: 32px; }
  .hh-ra-period-caption { margin-bottom: var(--sp-2) !important; font-size: 11px; line-height: 15px; }
  .hh-ra-period { min-width: 0; }
  .hh-ra-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hh-ra-chips::-webkit-scrollbar { display: none; }
  .hh-ra-chips > .hh-chip { flex: none; white-space: nowrap; }
  .hh-ra-prevq { font-size: var(--size-caption); line-height: var(--lh-caption); }
  .hh-ra-prevq .hh-link { font-size: inherit; }

  /* Історія корекцій */
  [data-ra-history] .hh-ra-hist {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px var(--sp-2);
    min-height: 0;
    padding: var(--sp-2) var(--sp-3);
  }
  .hh-ra-hist > .hh-list__body { flex: 1 1 100%; }
  .hh-ra-hist__note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .hh-ra-hist.is-open .hh-ra-hist__note { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .hh-ra-hist__more { display: inline; align-self: flex-start; font-size: var(--size-caption); }
  .hh-ra-hist__acts { width: 100%; justify-content: flex-start !important; margin-left: calc(-1 * var(--sp-2)); }
  .hh-ra-hist__acts .hh-btn--sm { min-height: 30px; padding: 0 var(--sp-2); font-size: var(--size-caption); }

  /* Рядки акту */
  .hh-reconciliation-table.hh-table--responsive tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    /* Без column-gap: схована порожня сума лишала б зайвий проміжок
       праворуч — відступ дає margin самої суми. */
    column-gap: 0;
    row-gap: 2px;
    padding: var(--sp-2) var(--sp-3);
  }
  .hh-reconciliation-table.hh-table--responsive tbody td { display: block; padding: 0; text-align: left; }
  .hh-reconciliation-table.hh-table--responsive tbody td::before { content: none; display: none; }
  .hh-reconciliation-table.hh-table--responsive tbody td:empty,
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt--empty { display: none; }
  .hh-reconciliation-table.hh-table--responsive tbody td:nth-child(1) {
    grid-row: 1; grid-column: 1;
    font-size: var(--size-caption); line-height: 18px; color: var(--text-muted);
  }
  .hh-reconciliation-table.hh-table--responsive tbody td[colspan] { grid-column: 1 / -1; font-size: inherit; }
  .hh-reconciliation-table.hh-table--responsive tbody td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; overflow-wrap: anywhere; }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt { grid-row: 1; margin-left: var(--sp-2); text-align: right; white-space: nowrap; font-weight: var(--weight-medium); }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt--inc { grid-column: 2; color: var(--text); }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt--dec { grid-column: 3; color: var(--ok); }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt--inc::before,
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt--dec::before {
    display: inline; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none;
  }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt--inc::before { content: "+"; }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-amt--dec::before { content: "\2212"; }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-bal {
    grid-row: 3; grid-column: 1 / -1;
    font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted);
  }
  .hh-reconciliation-table.hh-table--responsive tbody td.hh-ra-bal::before {
    content: "Баланс "; display: inline; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none;
  }

  /* Підвал: без порожніх рядків «підпис — значення» — по рядку на
     підсумок. «Обороти за період» ліворуч, +збільшення / −зменшення
     праворуч в одному рядку (переносяться цілими, якщо суми великі);
     «Кінцеве сальдо · дата» ліворуч, сума з галочкою праворуч. */
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-hover);
    border-bottom: 0;
  }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot tr + tr { border-top: var(--border-w) solid var(--border-faint); }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td:empty { display: none; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td[data-label]::before { content: none; display: none; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-label { order: 1; text-align: left; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-date {
    order: 2; text-align: left; font-size: var(--size-caption); font-weight: var(--weight-regular); color: var(--text-muted); white-space: nowrap;
  }
  /* Кінцеве сальдо: підпис і дата стовпчиком ліворуч, сума праворуч —
     в один рядок «підпис · дата · Ми винні 3 456 789,01 ₴» на 343px не влазить. */
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot tr.hh-ra-foot-closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--sp-2);
    row-gap: 0;
  }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot tr.hh-ra-foot-closing td.hh-ra-foot-label { grid-row: 1; grid-column: 1; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot tr.hh-ra-foot-closing td.hh-ra-foot-date { grid-row: 2; grid-column: 1; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot tr.hh-ra-foot-closing td.hh-td--num { grid-row: 1 / 3; grid-column: 2; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-td--num { order: 3; text-align: right; white-space: nowrap; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-inc { margin-left: auto; }
  /* «Обороти за період» — один рядок: підпис ліворуч, суми праворуч. */
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot tr.hh-ra-foot-totals { align-items: baseline; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-dec { color: var(--ok); }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-inc::before,
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-dec::before {
    display: inline; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none;
  }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-inc::before { content: "+"; }
  .hh-reconciliation-table.hh-table--foot-stack.hh-table--responsive tfoot td.hh-ra-foot-dec::before { content: "\2212"; }
}
/* ======================= /Акт звіряння — телефон ======================= */

.hh-table__primary { color: var(--text); font-weight: var(--weight-medium); }
.hh-table__secondary { color: var(--text-muted); }

/* Позиції торгового документа (HH_SALES.docLinesTableHtml, sales-shared.js)
   — чек, видаткова, списання, повернення. Власник 26.09.2026: замість
   карток-рядків із мініатюрою — компактний .hh-table за дизайн-кодом
   (01-rules/instruction-design-scale.md §3/§4). Тут лише те, чого базовому
   .hh-table бракує: підрядок SKU·колекція дрібним (§3 «дрібний текст,
   мета» 10.5–11px), вузька колонка дії й стрілочка «↗». Таблиця всередині
   картки — без власної рамки .hh-table-wrap (картка вже рамка). */
.hh-doc-lines-wrap { margin-top: var(--sp-2); }
.hh-doc-lines td { vertical-align: top; }
.hh-doc-lines__name { color: var(--text); font-weight: var(--weight-medium); }
.hh-doc-lines__meta { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.hh-doc-lines__ext { color: var(--text-muted); text-decoration: none; margin-left: 2px; }
/* Стан рядка (чип забезпечення на картці замовлення, 03.10.2026) — окремим
   рядком під артикулом, звичайного розміру й семантичного тону: власник
   «забезпечено має світитись помітніше» (було сіре 11px лише в режимі). */
.hh-doc-lines__status { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.hh-doc-lines__status > .hh-line-supply { max-width: 100%; white-space: normal; text-align: left; }
.hh-doc-lines__disc { color: var(--text-muted); }
.hh-doc-lines th.hh-doc-lines__act,
.hh-doc-lines td.hh-doc-lines__act { width: 1%; white-space: nowrap; text-align: right; padding-top: 5px; padding-bottom: 5px; }
@media (max-width: 767px) {
  /* Телефон: не чотири рядки «підпис — число» на кожну позицію (так
     складає загальний .hh-table--responsive), а компактна картка — назва
     на всю ширину, під нею ОДИН ряд К-сть · Ціна · Знижка · Сума з
     підписом над числом, дія окремим рядком праворуч. */
  .hh-doc-lines.hh-table--responsive tr {
    display: grid;
    /* К-сть — вузька (ціле число), три грошові колонки ділять решту:
       рівні частки стискали «2 240,00 ₴» впритул до сусідньої суми. */
    grid-template-columns: min-content repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-3);
    row-gap: 2px;
  }
  .hh-doc-lines.hh-table--responsive td.hh-doc-lines__product,
  .hh-doc-lines.hh-table--responsive td.hh-doc-lines__act { grid-column: 1 / -1; display: block; width: auto; }
  .hh-doc-lines.hh-table--responsive td.hh-doc-lines__product { text-align: left; }
  .hh-doc-lines.hh-table--responsive td.hh-doc-lines__act { text-align: right; }
  .hh-doc-lines.hh-table--responsive td.hh-doc-lines__product::before,
  .hh-doc-lines.hh-table--responsive td.hh-doc-lines__act::before { content: none; }
  .hh-doc-lines.hh-table--responsive td.hh-doc-lines__act:empty { display: none; }
  .hh-doc-lines.hh-table--responsive td.hh-td--num {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  .hh-doc-lines.hh-table--responsive td.hh-td--num::before { font-size: 9.5px; }
  /* Під таблицею одразу підсумок зі своєю межею — друга лінія зайва. */
  .hh-doc-lines.hh-table--responsive tbody tr:last-child { border-bottom: 0; }
  .hh-doc-lines.hh-table--responsive .hh-table__detail-row { display: block; }
  .hh-doc-lines.hh-table--responsive .hh-table__detail-row > td { display: block; text-align: left; }
  .hh-doc-lines.hh-table--responsive .hh-table__detail-row > td::before { content: none; }
}

/* Позиції замовлення (screen-orders.js positionsCardHtml, власник
   27.09.2026) — та сама .hh-doc-lines, що на видатковій; тут лише шапка з
   перемикачем «Забезпечення», вузький підрядок стану під товаром і
   підсумок. Підрядок візуально належить своєму товару: лінія між ними
   знята, відступ зверху мінімальний, шрифт — мета (11px, §3). */
.hh-order-positions__head { margin-bottom: 0; align-items: center; }
.hh-order-positions__tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.hh-order-positions__all { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* Чекбокс рядка чернетки — на початку клітинки товару, не окремою колонкою:
   колонки лишаються як на видатковій. */
.hh-doc-lines__check { display: inline-flex; vertical-align: -2px; margin-right: var(--sp-2); }
.hh-order-positions__notice { margin-top: var(--sp-2); padding: 7px var(--sp-3); }
.hh-order-positions__hint { margin: var(--sp-2) 0 0; }
.hh-order-positions__totals { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border-faint); }
.hh-order-positions__totals .hh-kv { padding: 3px 0; }
/* Чип режиму: вимкнено — як звичайний чип; увімкнено — тонований стан
   «вибрано» (дизайн-код §2.1/§7.2), не суцільна заливка. */
.hh-chip--mode { cursor: pointer; min-height: 26px; padding: 3px 11px; font-size: 12px; background: var(--surface); color: var(--text); }
.hh-chip--mode:hover { background: var(--surface-hover); }
.hh-chip--mode[aria-pressed="true"] {
  background: color-mix(in srgb, var(--surface-brand) 8%, var(--surface));
  border-color: var(--text);
  color: var(--text);
  font-weight: 600;
}
.hh-chip--mode:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.hh-doc-lines tr:has(+ tr.hh-line-state) > td { border-bottom: 0; padding-bottom: 2px; }
.hh-doc-lines tr.hh-line-state > td { padding: 0 var(--sp-3) 7px; font-size: 11px; color: var(--text-muted); }
.hh-line-state__body { display: flex; align-items: center; flex-wrap: wrap; gap: 3px var(--sp-3); line-height: 1.35; }
.hh-line-state__item { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.hh-line-state .hh-btn--sm { min-height: 24px; padding: 0 9px; font-size: 11px; }
.hh-line-state .hh-btn__icon { display: inline-flex; margin-right: 4px; }
.hh-line-state .hh-btn__icon svg { width: 13px; height: 13px; }
/* Дії резерву («Зняти резерв», «Замовити переміщення») — окремим блоком
   поруч з описом, не словом у тексті (власник 12.10.2026). */
.hh-line-state__actions { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); }
.hh-line-state__popup {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: 5px; padding: 6px var(--sp-2);
  border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.hh-line-state__qty { width: 70px; }
@media (max-width: 767px) {
  .hh-doc-lines.hh-table--responsive tr:has(+ tr.hh-line-state) { border-bottom: 0; padding-bottom: 0; }
  .hh-doc-lines.hh-table--responsive tr.hh-line-state { padding-top: 2px; }
  .hh-doc-lines.hh-table--responsive tr.hh-line-state > td { padding: 0; }
  .hh-line-state .hh-btn--sm { min-height: 32px; }
  /* На телефоні підрядок — абзац, що тече, а не flex-стовпчик: інакше
     чекбокс, «Відвантажено 1 з 3 → …» і «Потрібно 2» стояли б кожен
     окремим рядком і одна позиція знову займала б пів екрана. */
  .hh-line-state__body { display: block; line-height: 1.9; }
  .hh-line-state__body > .hh-line-check { vertical-align: middle; margin-right: var(--sp-2); }
  .hh-line-state__item { display: inline; margin-right: var(--sp-2); }
  /* На телефоні дії резерву — окремим рядком під описом, великі для пальця. */
  .hh-line-state__actions { display: flex; flex-wrap: wrap; margin: 4px 0 2px; }
  /* Відсоток знижки рядка замовлення — під сумою, а не в тому ж рядку:
     на 375px «−600,00 ₴ 13,33%» наїжджав на сусідню «Ціну». */
  .hh-doc-lines .hh-doc-lines__disc-pct { display: block; }
}

/* «Продажі за артистом/туром» (screen-x-analytics.js, §2.1) — перша
   колонка «Артист · тур» несе змінну довжину тексту (ім'я + назва туру
   підрядком) і без фіксації «літала», стискаючи/розтягуючи сусідні
   числові колонки залежно від довжини конкретного рядка (Роман, живий
   скріншот 14.09.2026). table-layout:fixed + width лише на першій
   колонці — решта п'ять колонок без явної ширини стандартно ділять
   залишок порівну, тож руками розписувати відсоток на кожну не треба. */
.hh-x-an-artist-table { table-layout: fixed; }
.hh-x-an-artist-table th:first-child,
.hh-x-an-artist-table td:first-child { width: 25%; }

/* Матриця «Команда туру» (design/screen-tours.js, Роман, 11.09.2026;
   осі розвернуто 23.09.2026) — рядки-менеджери × колонки-концерти.
   Клітинки з чекбоксом центруємо (успадкований .hh-td--num вирівняв би
   праворуч — правильно для цифр, не для прапорця). Чернетковий РЯДОК
   (людина ще не збережена) — той самий tint, що використовує решта
   "ще не проведено" в CORE; селектор лишається на th і на td, бо до
   розвороту чернетка була колонкою, і правило від осі не залежить. */
.hh-team-matrix td.hh-td--num { text-align: center; }
.hh-team-matrix th.hh-team-matrix__draft,
.hh-team-matrix td.hh-team-matrix__draft { background: var(--accent-quiet, var(--surface-hover)); }

/* Горизонтальний скрол + приклеєна колонка/рядок (design/screen-tours.js,
   renderXTeamMatrix, Роман, 24.09.2026, живий фідбек №3: скрол взагалі не
   працював). Той самий прийом, що вже .hh-docs-table-wrap/.hh-x-forecast-
   table-wrap: спільний .hh-table-wrap до 29.09.2026 ніс overflow:hidden (тепер overflow-x: auto — див. сам клас) (~L1130,
   навмисно — щоб довгий зміст не "втікав" з інших ~15 таблиць порталу без
   попиту), тому власний клас на обгортці, а не зміна спільного. */
.hh-team-matrix-wrap { overflow-x: auto; overflow-y: hidden; }

/* Приклеєна зліва колонка менеджера — і в <thead> (top+left разом,
   успадковує position:sticky;top:0 від .hh-table thead th вище, тут лише
   додається left), і в <tbody>. z-index 2 — нижче за var(--z-sticky)=10
   заголовка (щоб рядки не перекривали приклеєний рядок міст/дат при
   вертикальному скролі сторінки), але вище за звичайні клітинки під час
   горизонтального. */
.hh-team-matrix-sticky-col { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.hh-team-matrix tbody tr:hover .hh-team-matrix-sticky-col { background: var(--surface-hover); }

/* Місто в заголовку колонки — переноситься у межах фіксованої ширини
   колонки (EVENT_COL_WIDTH, screen-tours.js), не розтягує сусідні. */
.hh-team-matrix-city { display: block; white-space: normal; word-break: break-word; }

/* Підсумковий рядок відділений явно, а не просто жирним. */
.hh-table tfoot td {
  padding: var(--sp-3);
  border-top: var(--border-w) solid var(--border-strong);
  font-weight: var(--weight-medium);
  background: var(--surface-hover);
}

@media (max-width: 767px) {
  .hh-table--responsive thead { display: none; }
  .hh-table--responsive,
  .hh-table--responsive tbody,
  .hh-table--responsive tr,
  .hh-table--responsive td { display: block; width: 100%; }

  .hh-table--responsive tr {
    padding: var(--sp-3);
    border-bottom: var(--border-w) solid var(--border-faint);
  }
  .hh-table--responsive td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border: 0;
    text-align: right;
  }
  /* Підсумок не розкладається по підписах — це один рядок, а не картка.
     Правильно для короткого 2-клітинкового футера («Разом · N сторін» +
     одна сума), але таблиця роялті (royalty-events-table.js) несе в
     футері ЧОТИРИ цифрові колонки (Оборот/База/Ставка/Нараховано) —
     той самий рядок на 343px стискав їх одна в одну, крайня клітинка
     йшла за правий край екрана (Роман, живий скріншот 14.09.2026).
     Модифікатор `.hh-table--foot-stack` (застосований лише там, де
     колонок справді багато) повертає футер до тієї самої карткової
     розкладки, що вже tbody нижче — підпис колонки над значенням,
     рядок на всю ширину. */
  .hh-table--responsive tfoot { display: block; }
  .hh-table--responsive tfoot tr { display: flex; justify-content: space-between; align-items: baseline; }
  .hh-table--responsive tfoot td { padding: var(--sp-3) 0; }
  .hh-table--responsive tfoot td:empty { display: none; }

  .hh-table--foot-stack.hh-table--responsive tfoot tr { display: block; }
  .hh-table--foot-stack.hh-table--responsive tfoot td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    text-align: right;
  }
  .hh-table--foot-stack.hh-table--responsive tfoot td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--size-caption);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    flex: none;
  }

  /* Підпорядкований рядок запису (screen-money-movements.js, §3.5): колонки
     «Дата»/«Рахунок»/«Джерело» не застосовні до окремого запису журналу й
     навмисно порожні — на мобільному картці ці ::before-підписи без
     значення лише займали б рядок, тож ховаємо їх так само, як tfoot вище. */
  .hh-table--responsive .hh-table__sub-row td:empty { display: none; }

  /* Підпис колонки береться з data-label — той самий HTML, інша форма. */
  .hh-table--responsive td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--size-caption);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    flex: none;
  }

  /* Рядок-деталь (screen-mkt-today.js, Meta Ads) містить свою власну
     hh-table--responsive всередині ОДНІЄЇ комірки — та комірка не є парою
     "підпис: значення", тому загальне правило td (display:flex) їй не
     підходить: воно стиснуло б вкладену таблицю в один рядок замість
     дозволити їй розкластись власними правилами. */
  .hh-table--responsive .hh-table__detail-row > td {
    display: block;
    text-align: left;
    padding: var(--sp-3);
  }
  .hh-table--responsive .hh-table__detail-row > td::before { content: none; }

  /* Комірка «Наявність» (issue #480, скріншот Романа 24.08.2026) — загальне
     правило `.hh-table--responsive td { display:flex }` вище кладе підпис
     і значення в один рядок і ділить його навпіл (justify-content:
     space-between). Для звичайної пари "підпис: одне значення" це ок, але
     тут значення — САМ ПО СОБІ список складів (div.hh-stock-rows,
     screen-products.js sizesStockBlock), і той самий рецепт стискав кожен
     склад до третини екрана — назва складу переносилась посередині слова.
     Клас hh-table__cell--stack повертає комірку в block: підпис колонки
     (::before) над списком, список — на всю ширину під ним, кожен склад
     власним рядком нижче (.hh-stock-rows). */
  .hh-table--responsive td.hh-table__cell--stack {
    display: block;
    text-align: left;
  }
  .hh-table--responsive td.hh-table__cell--stack::before {
    display: block;
    margin-bottom: var(--sp-1);
  }

  /* У картці значення має всю праву частину рядка, тож рідкісний довгий
     чип краще перенести, ніж вивести за картку (nowrap — лише для
     табличної розкладки, правило .hh-table td .hh-chip вище). */
  .hh-table--responsive td .hh-chip { white-space: normal; }
}

/* ВУЗЬКЕ МІСЦЕ, А НЕ ВУЗЬКЕ ВІКНО → ТА САМА КАРТКА-РЯДОК (власник,
   29.09.2026, сторінка концерту). Правило вище спрацьовує лише за
   шириною ВІКНА (<768px). Але таблиця буває вузькою й на десктопі: права
   колонка картки (40%, .hh-home-split) дає обгортці ~350–450px на
   будь-якому десктопі — на 1440px це ~410px під сім колонок «Роздано
   безкоштовно»; планшет поруч із бічним меню — ~440px під будь-яку
   таблицю. Тоді таблиця лишалась таблицею й стискала колонки до
   нечитабельного. Той самий принцип, що вже .hh-facts (auto-fit від
   ширини контейнера, не вікна): контейнер — .hh-table-wrap
   (container-type вище).

   Поріг 480px (живий замір, 29.09.2026): права колонка — завжди нижче
   (на 1920px, де сторінка впирається в --content-max, ~450px), ліва 60%
   колонка — завжди вище (на 1200px ~500px), тож її таблиці лишаються
   таблицями, як і були. Широкі реєстри на всю сторінку поріг не
   зачіпає взагалі. Вище порогу те, що не влазить, скролиться в обгортці.

   Це КОПІЯ базових правил блоку @media вище, не нова розкладка: той самий
   HTML (data-label), та сама картка. Спеціальні модифікатори окремих
   реєстрів (.hh-doc-lines, акт звіряння) лишаються лише в @media — їхні
   таблиці стоять на всю ширину сторінки, у вузькому контейнері їх немає. */
@container (max-width: 479px) {
  .hh-idl-table { min-width: 0; } /* «Внутрішні доставки»: картка без мінімуму ширини */
  /* «Продажі»: порожня «Сума» неосновного лінку — та сама копія, що в @media вище. */
  .hh-sale-docs-table.hh-table--responsive td:empty { display: none; }
  .hh-table--responsive thead { display: none; }
  .hh-table--responsive,
  .hh-table--responsive tbody,
  .hh-table--responsive tr,
  .hh-table--responsive td { display: block; width: 100%; }
  .hh-table--responsive tr {
    padding: var(--sp-3);
    border-bottom: var(--border-w) solid var(--border-faint);
  }
  .hh-table--responsive td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border: 0;
    text-align: right;
  }
  .hh-table--responsive td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--size-caption);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    flex: none;
  }
  .hh-table--responsive tfoot { display: block; }
  .hh-table--responsive tfoot tr { display: flex; justify-content: space-between; align-items: baseline; }
  .hh-table--responsive tfoot td { padding: var(--sp-3) 0; }
  .hh-table--responsive tfoot td:empty { display: none; }
  .hh-table--foot-stack.hh-table--responsive tfoot tr { display: block; }
  .hh-table--foot-stack.hh-table--responsive tfoot td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    text-align: right;
  }
  .hh-table--foot-stack.hh-table--responsive tfoot td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--size-caption);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    flex: none;
  }
  .hh-table--responsive .hh-table__sub-row td:empty { display: none; }
  .hh-table--responsive .hh-table__detail-row > td {
    display: block;
    text-align: left;
    padding: var(--sp-3);
  }
  .hh-table--responsive .hh-table__detail-row > td::before { content: none; }
  .hh-table--responsive td.hh-table__cell--stack { display: block; text-align: left; }
  .hh-table--responsive td.hh-table__cell--stack::before { display: block; margin-bottom: var(--sp-1); }
  .hh-table--responsive td .hh-chip { white-space: normal; }
}

/* Список складів у комірці «Наявність» (issue #480) — стовпчик, не рядок:
   кожен склад своїм .hh-stock-rows__row на всю ширину контейнера, назва
   зліва, кількість справа. Без вкладеного nowrap-спана: назва складу —
   звичайний текст, переноситься по словах (не посеред слова), бо тут
   нема нічого, що примушувало б її стиснутись до колонки-третини, як
   було з голими <span style="display:block"> усередині flex-комірки. */
.hh-stock-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.hh-stock-rows__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
}
.hh-stock-rows__loc { min-width: 0; }
.hh-stock-rows__qty {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Список-рядок (мобільна альтернатива таблиці там, де колонок мало)
   -------------------------------------------------------------------------- */

.hh-list { display: flex; flex-direction: column; background: var(--surface);
           border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

.hh-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-w) solid var(--border-faint);
  text-decoration: none;
  color: inherit;
}
.hh-list__item:last-child { border-bottom: 0; }
.hh-list__item:hover { background: var(--surface-hover); }
/* «Що в транзиті» (12.10.2026) — розкриття пункту «Товар на складі туру»:
   рядок черги Головної X і картка концерту (HH_X_CHECKLIST.transitDetailsHtml). */
.hh-x-transit { padding: 0 var(--sp-4) var(--sp-3); border-bottom: var(--border-w) solid var(--border-faint); font-size: 13px; }
.hh-list--checks .hh-x-transit, .hh-list__body .hh-x-transit { padding: var(--sp-2) 0 0; border-bottom: 0; }
.hh-x-transit:last-child { border-bottom: 0; }
.hh-x-transit__sum { cursor: pointer; color: var(--accent); padding: var(--sp-1) 0; }
.hh-x-transit__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hh-x-transit__list li { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.hh-x-transit__name { display: flex; flex-direction: column; min-width: 0; }
.hh-x-transit__where { color: var(--text-muted); font-size: 12px; }
.hh-x-transit__qty { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh-x-transit__links { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-2); }
/* 812: скасований звіт про залишки лишається в списках — сірим і без дій
   (рядок списку розподілу, рядок таблиці перерахунків туру/X). */
.hh-list__item--cancelled,
.hh-table tr.hh-row--cancelled { opacity: .55; }
.hh-list__item--cancelled:hover { background: transparent; }
/* Рядок, який показуємо, але вибрати не можна (пошук людини в команду
   туру: без телефону вхід у портал неможливий). Не ховаємо й не тьмяніємо
   до нечитабельності — червоний текст поруч і так каже причину; знімаємо
   лише сигнали клікабельності, щоб рядок не обіцяв дії, якої нема. */
.hh-list__item[aria-disabled="true"] { cursor: not-allowed; }
.hh-list__item[aria-disabled="true"]:hover { background: transparent; }
/* Рядок, що варто доповнити — реєстр «Люди», клієнт без імені
   (instruction-clients.md §3.2: «підсвічується, бо це те, що варто
   доповнити»). Той самий колір, що попереджувальний банер
   (--warn-quiet), не --danger — відсутнє ім'я не помилка, лише прогалина.

   ТОЙ САМИЙ БАГ, ЩО --cursor і --active (знайдено 14.09.2026 разом із
   живим багом підсвітки активного рядка «Комунікацій»): голий клас
   (0,1,0) програє скиду `button.hh-list__item` (0,1,1) нижче в файлі
   незалежно від порядку — фон ніколи не застосовувався. Складений
   селектор `.hh-list__item.hh-list__item--attn` піднімає специфічність
   до (0,2,0). */
.hh-list__item.hh-list__item--attn { background: var(--warn-quiet); }
.hh-list__item.hh-list__item--attn:hover { background: var(--warn-quiet); filter: brightness(0.97); }
/* Курсор клавіатурної навігації по списку (issues-log #117 — «Матеріали»
   папками: ↑/↓ рухають підсвітку, Enter відкриває, Backspace — рівнем
   вище). Той самий візуальний прийом, що hover, — курсор і наведення миші
   не повинні виглядати як два різних стани.

   БАГ, ЗНАЙДЕНИЙ 21.08.2026 (Роман: «стрілочки не працюють, навіть на
   старті не виділена жодна позиція»): рядки — це <button class="hh-list__
   item">, і нижче в цьому файлі є `button.hh-list__item { background:
   transparent }` (скид кнопки). Той селектор — елемент+клас, специфічність
   (0,1,1); голий `.hh-list__item--cursor` — лише клас, (0,1,0). Менша
   специфічність програє незалежно від порядку в файлі, тож transparent
   завжди перебивав підсвітку курсора — клас і view.cursor рухались
   коректно (JS не був зламаний), але на екрані нічого не змінювалось, і
   саме тому стрілки виглядали "неробочими" вже з першого рендеру, коли
   мала б підсвітитись перша позиція. `:hover` рахує як псевдоклас
   (специфічність (0,2,0)) — тому наведення мишею перебивало transparent, а
   курсор клавіатури ні; це й пояснює, чому Backspace (переходить рівень,
   видно за хлібною крихтою) здавався робочим, а ↑/↓ — ні. Складений
   селектор `.hh-list__item.hh-list__item--cursor` піднімає специфічність
   до (0,2,0) — тепер нарівні з :hover і вище за скид кнопки. */
.hh-list__item.hh-list__item--cursor { background: var(--surface-hover); outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }

/* Рядок-кнопка. Клікабельний рядок мусить бути <button>, а не <div> з
   onclick: інакше він недосяжний із клавіатури й невидимий для читача екрана.
   Але браузер дає кнопці власне тло, рамку й кегль 13px — і рядок ламається.

   Скид живе ТУТ, а не в екранах. Три екрани встигли завести по власній
   інлайновій копії цього самого набору, перш ніж це помітилось; четвертий
   (товари) копію не зробив — і рядок вийшов сірою плашкою з невидимою
   назвою. Саме так система й розходиться: не рішенням, а копією. */
button.hh-list__item,
a.hh-list__item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: var(--border-w) solid var(--border-faint);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.hh-list__item:last-child,
a.hh-list__item:last-child { border-bottom: 0; }
/* `button.hh-list__body` (issue #800, п'ятий екран, що наступив на той
   самий грабель, докстрінг вище: браузер малює кнопці власний колір
   тексту, що НЕ успадковується від батька сам собою) — тут кнопкою є лише
   ТІЛО рядка (design/screen-needs.js), не весь `.hh-list__item`, тому не
   потрапляє під селектор вище. Решту (border/padding/background/cursor)
   той рядок уже задає inline — тут лише те, чого не вистачало: колір і
   шрифт успадковуються від батька, а не малюються дефолтом браузера. */
button.hh-list__body { font: inherit; color: inherit; }

.hh-list__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh-list__title { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Перенесення замість обрізання «…» — лише там, де сам текст рядка є
   змістом, а не міткою поруч зі значенням (журнал питань чату, координатор
   25.08.2026: «обрізаються запити, зроби перенесення по стрічках»).
   Модифікатор, не зміна базового .hh-list__title — той однорядковий
   nowrap+ellipsis досі правильний скрізь-інде (реєстри замовлень/клієнтів
   тощо), де рядок мусить лишатись одного висоти для рівного списку. */
.hh-list__title--wrap { white-space: normal; overflow: visible; text-overflow: clip; }
.hh-list__meta--wrap { white-space: normal; }
.hh-list__meta { font-size: var(--size-small); color: var(--text-muted); }
/* «Історія документа» (sales-shared.js documentHistoryEntryHtml): три рівні
   запису — кожен одним стилем, хоч би які частини запис мав (власник
   05.10.2026: «записи різними шрифтами»). Переноситься, не обрізається —
   «було → стало» з крапками в кінці нічого не каже. */
.hh-doc-history__item .hh-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-doc-history__head { font-size: var(--size-body); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.hh-doc-history__change { font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--weight-regular); overflow-wrap: anywhere; }
.hh-doc-history__item .hh-list__meta { white-space: normal; }
.hh-list__trail { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Смужка «Разом» унизу списку (X · Головна, «Іде зараз», власник 10.10.2026):
   сума праворуч — під сумами рядків, готівка/картка тим самим приглушеним
   підписом, що в рядку. На телефоні переноситься між «Разом» і підписом
   (flex-wrap), кожна сума — .hh-money (nowrap). Верхня межа звичайна
   (--border, не --border-faint) — це підсумок, а не ще один рядок;
   margin-top −1px накриває розділювач останнього рядка, двох ліній нема. */
.hh-list__total {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
  column-gap: var(--sp-3); row-gap: 2px;
  padding: var(--sp-2) var(--sp-4);
  margin-top: calc(-1 * var(--border-w));
  border-top: var(--border-w) solid var(--border);
  text-align: right; font-variant-numeric: tabular-nums;
}
.hh-list__total-sum { font-weight: var(--weight-medium); white-space: nowrap; }

/* Повітряна тривога на місці живої події (858, design/air-alert-badge.js):
   «Іде зараз» X · Головна і живі картки додатку. Лише токени теми.
   red/air — небезпека, yellow — попередження, oblast — нейтральний сірий,
   stale — приглушений пунктир (дані застарілі — не «відбій»). Другий рядок
   (причина, час, «за даними Ukraine Alarm») переноситься на телефоні. */
.hh-air-alert-line {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--sp-2); row-gap: 2px; margin-top: var(--sp-1);
  min-width: 0;
}
.hh-air-alert {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 1px var(--sp-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--size-caption); line-height: var(--lh-caption);
  font-weight: var(--weight-medium); white-space: nowrap;
  color: var(--text-muted); background: var(--surface-sunken);
}
.hh-air-alert__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.hh-air-alert--red, .hh-air-alert--air {
  color: var(--danger); background: var(--danger-quiet); border-color: var(--danger-border);
}
.hh-air-alert--yellow {
  color: var(--warn); background: var(--warn-quiet); border-color: var(--warn-border);
}
.hh-air-alert--oblast { color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border); }
.hh-air-alert--stale {
  color: var(--text-faint); background: transparent; border-style: dashed; font-weight: var(--weight-regular);
}
.hh-air-alert--stale .hh-air-alert__dot { opacity: .5; }
.hh-air-alert__detail {
  font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted);
  min-width: 0; overflow-wrap: anywhere;
}
.hh-air-alert__src { color: var(--text-faint); }

/* Ручка перетягування (design/step-panel.js, screen-collections.js
   тощо) — раніше рендерилась голим символом ⠿ без жодного стилю, тобто
   без cursor:grab виглядала як звичайний текст, а не afordance для
   перетягування (Роман, 05.09: «немає ручок перетягування»). */
.hh-drag-handle {
  cursor: grab;
  color: var(--text-faint);
  padding: 0 var(--sp-1);
  user-select: none;
  touch-action: none;
  line-height: 1;
}
.hh-drag-handle:active { cursor: grabbing; }

/* Лінія вставки між двома кроками конструктора (instruction-corporate.md
   §4.4, чек-лист A4): «тонка лінія з плюсом посередині». Ідле — майже
   непомітна смужка, на наведенні розкривається й показує кнопку. */
.hh-step-insert {
  height: 6px;
  margin: -3px 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hh-step-insert__btn {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: var(--border-w) solid var(--accent);
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hh-step-insert:hover .hh-step-insert__btn,
.hh-step-insert__btn:focus-visible { opacity: 1; }

/* Хвіст рядка з кількома трейл-полями одна над одною (сума / клієнт /
   статус) — реєстр продажів. Раніше жила інлайновим style="" прямо в
   renderRow(): display/flex-direction/align-items інлайну має вищий
   пріоритет за клас і глушив мобільний оверрайд .hh-list__trail нижче,
   тому колонка форсувалась і на вузькому екрані, де мала б розпливатись
   у ширину. Клас, а не інлайн — саме тому, що мобільний оверрайд мусить
   мати змогу його перебити. */
.hh-list__trail--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* instruction-order-page-compact.md §2 / mockup-order.html #o1 — рядок
   позиції замовлення однорядково табличний: кількість/ціна/знижка/сума як
   окремі колонки в trail, не злитий текстовий підрядок (аудит компліансу
   10.09.2026). Той самий `.hh-list__item` (thumb + body + trail), лише сам
   trail — рядок колонок, не стовпчик значень одне під одним. З 27.09.2026
   картка замовлення цим не користується (позиції — таблиця видаткової,
   .hh-doc-lines); лишився screen-artists.js. */
.hh-list__trail--row {
  display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--sp-2) var(--sp-3); font-variant-numeric: tabular-nums; white-space: nowrap;
  flex: 0 1 auto; min-width: 0;
}
.hh-list__trail--row .hh-list__trail-col { display: flex; flex-direction: column; align-items: flex-end; }
.hh-list__trail--row .hh-list__trail-col > span:first-child { font-size: var(--size-small); color: var(--text-muted); }

/* Підрядок рядка списку на всю ширину (632, заявки на оплату в рядку акту
   роялті, design/screen-artists.js actListRequestsHtml). Рядок сам
   переходить у перенос, лише коли такий підрядок у ньому є — через :has, а
   не inline-стиль чи модифікатор на .hh-list__item: мобільний медіазапит
   нижче вже вмикає перенос для всіх рядків, і голий .hh-list__item
   лишається тим, на що він спирається. */
.hh-list__item:has(> .hh-list__subrow) { flex-wrap: wrap; }
.hh-list__subrow {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-1) var(--sp-3); font-size: var(--size-small); min-width: 0;
}

/* Масовий режим головного списку каталогу (issue #649, координатор,
   28.08.2026) — той самий рецепт, що .hh-tile__modal-item/-select нижче
   (попап «Склад Style»), лише тут не потрібен абсолютний оверлей: рядок
   .hh-list__item і так display:flex/align-items:center/gap, тож чекбокс і
   вміст рядка просто стають двома flex-дітьми поруч, замість картки з
   фото на всю висоту. .hh-list__bulk-row — сама обгортка (несе клас
   .hh-list__item, тому border-bottom/padding/last-child не подвоюються й
   не губляться); .hh-list__bulk-inner — вміст рядка БЕЗ другого шару
   рамки/паддінгу (їх уже несе обгортка), докстрінг `bulkInner` у
   listRow(). Чекбокс без відступу-«стрічки» hh-check (та має
   padding/gap для форм) — тут це один елемент серед flex-рядка, тому
   margin:0 явно. */
.hh-list__bulk-row { cursor: default; }
.hh-list__bulk-select { margin: 0; flex: none; }
button.hh-list__bulk-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}

/* Клієнтський підпис у хвості рядка — фіксована ширина зі скороченням
   потрібна на десктопі, де хвіст стиснутий у вузьку колонку поруч зі
   списком; на мобільному хвіст і так стає на всю ширину (нижче), і та
   сама межа лише обрізає ім'я раніше часу. */
.hh-sr-customer { display: inline-block; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.hh-link.hh-sr-customer { cursor: pointer; }

/* На телефоні хвіст рядка (чіпи, сума, стан) переїжджає під основний текст,
   а не тисне його збоку. Інакше довгий підпис стискається до нечитабельної
   колонки в три слова, а ім'я обрізається багатокрапкою — тобто гине саме
   те, заради чого рядок і читають. */
@media (max-width: 767px) {
  .hh-list__item { flex-wrap: wrap; align-items: flex-start; }
  .hh-list__title { white-space: normal; }
  .hh-list__trail {
    width: 100%;
    text-align: left;
    white-space: normal;
    padding-left: calc(32px + var(--sp-3));
    margin-top: var(--sp-2);
  }
  /* Колонка з §8 (сума/клієнт/статус одне під одним, вирівняні праворуч)
     лишається колонкою й на вузькому екрані — .hh-list__trail тут уже на
     всю ширину картки (правило вище), тож стискання, заради якого раніше
     ставили flex-direction:row, більше не загрожує. Рядком-з-переносом
     сума/ім'я/статус розповзались одразу під ім'ям клієнта, невирівняно
     й із рядками різної висоти (Роман, реєстр продажів, скріншот
     19.08.2026) — колонка з align-items:flex-end повертає предсказувану
     висоту (три рядки завжди) і статус-чіп рівно під правим краєм картки. */
  .hh-list__trail--stack {
    align-items: flex-end;
    gap: var(--sp-1);
  }
  .hh-sr-customer { max-width: none; }

  /* Коли хвіст — один короткий чіп (статус), переносити його вниз шкода:
     рядок росте вдвічі, і на екран влазить три записи замість шести. У
     довгому списку, який гортають у полі, це важливіше за вирівнювання.
     Модифікатор, а не автоматика: «короткий» знає той, хто будує список. */
  .hh-list--compact .hh-list__item { flex-wrap: nowrap; }
  .hh-list--compact .hh-list__trail {
    width: auto;
    padding-left: 0;
    margin-top: 0;
    text-align: right;
    flex: none;
  }

  /* hh-list--sales-compact — Роман, живий скріншот 08.09.2026 («Шоуруми →
     зміна → чеки», design/screen-showrooms.js renderShiftReceipts): на
     375px кожен документ розтягувався на 3-4 окремих рядки (сума й
     клієнт і чіп статусу — кожен на своєму, .hh-list__trail--stack —
     колонка ще й на всю ширину картки, докстрінг вище), і на екран
     влазило 4-5 чеків замість 7-8. `.hh-list--compact` поруч не підходить
     напряму — той модифікатор рахує на ОДИН короткий чіп, тут же хвіст
     завжди несе суму, ім'я клієнта Й чіп статусу (renderRow,
     sales-registry.js) разом. Тому свій модифікатор: хвіст лишається під
     заголовком (не тисне назву вбік — той самий урок §8 docstring вище),
     але замість колонки одне під одним — рядок, що переноситься, тож
     сума/клієнт/статус течуть одним-двома рядками, а не трьома-чотирма.
     Лише мобільний блок — на десктопі renderRow і так у вузькій хвіст-
     колонці праворуч, туди цей модифікатор не сягає. */
  .hh-list--sales-compact .hh-list__trail--stack {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-2);
  }
  /* Друга сума (X-частка/повна, subMoneyHtml) — окремим рядком лише коли
     справді є розбіжність (renderRow), і на компактному хвості вона
     ламала б однорядковий потік. Рідкісний випадок, тому просто на всю
     ширину хвоста, як і раніше на широкому екрані. */
  .hh-list--sales-compact .hh-list__trail--stack > .hh-caption { flex-basis: 100%; }
}

/* Чек-лист готовності (картка туру й картка події) — щільний варіант рядка.
   ---------------------------------------------------------------------------
   Роман, 03.09.2026, з телефона на турі: «цей блок треба оптимізувати, він
   має займати по висоті менше місця вдвічі». Виміряно на 375px до правки:
   рядок 116px (той, де назва переносилась, — 138px), увесь список 720px.
   Шість пунктів не влазили на екран разом, а дивляться на них саме як на
   шість — «скільки ще закрити перед виходом на майданчик».

   Висоту з'їдали три речі, кожна сама по собі розумна:
     · назва й підпис стояли ДВОМА рядками різного кегля (колонка .hh-list__
       body) — а підпис тут короткий і завжди пояснює саме цю назву;
     · чіп стану на телефоні переїжджав ПІД текст (правило .hh-list__trail у
       медіазапиті вище) — третій рядок на кожен пункт;
     · min-height:60px + padding sp-3 тримали рядок «просторим» під ситуацію,
       якої тут немає.

   Тому назва й підпис стають ОДНИМ рядком, розділені крапкою (·), чіп
   лишається праворуч (той самий прийом, що .hh-list--compact), відступи
   стискаються до sp-2. Жодна з трьох одиниць інформації не зникла — вони
   лише перестали займати по власному рядку.

   Кегль назви НЕ зменшено: у полі втомленим оком читають саме назву пункту,
   і 15px тут дорожчі за ще 10px висоти. Економія й так вийшла з переносів,
   а не з кегля.

   Модифікатор, не зміна базового .hh-list__item: інші списки (продажі,
   матеріали, контрагенти) живуть із двома рядками навмисно — там підпис
   несе окремий факт, а не пояснення до назви. */
.hh-list--checks .hh-list__item {
  min-height: 0;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  align-items: flex-start;
  flex-wrap: nowrap;
}
.hh-list--checks .hh-avatar { width: 22px; height: 22px; margin-top: 1px; }
.hh-list--checks .hh-avatar svg { width: 14px; height: 14px; }

/* «Офлайн-події» на Головній (23.09.2026, власник: «три події займають
   50% екрану») — той самий прийом, що --artists-home нижче, у зворотний
   бік: рядок і так несе аватар події (.hh-avatar--event, уже зменшений
   сьогодні до 56px), назву, дату+місце+менеджера одним рядком (менеджера
   перенесено з окремого рядка з бейджем у текст meta) і лічильник справа
   — тіснішого рядка й трохи меншого аватара досить, щоб три картки не
   тіснили решту зведення (Онлайн/Шоуруми/X) під згин екрана. Лише тут:
   базовий .hh-list__item (60px) і .hh-avatar--event (56/44px) лишаються
   спільними для решти застосунку й самої сторінки події. */
.hh-list--compact-home-events .hh-list__item { min-height: 0; padding: var(--sp-2) var(--sp-4); }
.hh-list--compact-home-events .hh-avatar--event { --event-avatar: 40px; }

/* Чипи готовності події на Головній (власник, 09.10.2026): п'ять чипів
   мають стояти в один рядок вузької правої картки. Тісніший проміжок і
   відступ, ніж базовий .hh-chip--sm, та злегка стиснутий трекінг (розмір
   шрифту той самий). Виміряно в headless Chrome зі справжніми CSS/шрифтами
   (рев'ю PR #3992; корисна ширина = картка − 71px): один рядок — усі
   зелені від картки 380px, змішані від 400px, усі червоні від 420px.
   Вужче — чипи ПЕРЕНОСЯТЬСЯ на другий рядок, не обрізаються. Зелений
   «готово» вже без «✓» (screen-home.js). */
.hh-readiness-chips { display: flex; flex-wrap: wrap; gap: 2px; }
.hh-readiness-chips .hh-chip--sm { padding: 1px 4px; gap: 1px; letter-spacing: -0.2px; white-space: nowrap; }

/* Рядок живого продажу (власник, 09.10.2026): одразу під назвою, сума
   жирна основним кольором — щоб не губилась серед адреси/менеджера. */
.hh-home-sales-line { gap: var(--sp-1); align-items: baseline; flex-wrap: wrap; }
.hh-home-sales-line__sum { color: var(--text); font-size: var(--size-body); font-weight: var(--weight-bold); }

/* Аватар МЕНЕДЖЕРА — бейдж-оверлей у куті аватара події (24.09.2026,
   власник: «поверни аватарку менеджера, зроби помітною» — після того, як
   23.09.2026 її прибрали в текст (§ вище), а тепер живий скрін показав, що
   саме ім'я губиться дрібним сірим текстом наприкінці meta). Не другий
   повнорозмірний кружечок поруч (додав би ширину рядка назад — власник
   двічі просив зменшити цей блок за сьогодні) і не окремий рядок з
   бейджем, як було ДО 23.09.2026 (та сама скарга на висоту). Бейдж лежить
   ПОВЕРХ уже наявного простору аватара події — рядок не росте ні в
   ширину, ні у висоту ні на піксель. .hh-avatar--wrap — обгортка з
   position:relative лише для позиціювання бейджа, сама не аватар і не
   несе стилю кружечка.
   border у колір .hh-list (var(--surface)) відокремлює бейдж від аватара
   події під ним — без канта на темному фото логотипу малий кружечок
   зливається з картинкою. Мобільний розмір трохи менший, як і сам
   .hh-avatar--event вище. */
.hh-avatar--wrap { position: relative; display: inline-flex; flex: none; }
/* .hh-avatar.hh-avatar--badge (два класи разом, не один) — навмисно:
   .hh-avatar (32px) оголошено НИЖЧЕ в цьому файлі, і за рівної
   специфічності (обидва — один клас) пізніше оголошення в каскаді
   перебивало б розмір бейджа на будь-якій ширині екрана, включно з
   мобільним брейкпоінтом. Живий рендер (getComputedStyle) показував
   32px замість 18px/16px, доки фікс не підняв специфічність селектора —
   тепер порядок оголошень у файлі більше не має значення (24.09.2026,
   рецензія знайшла живим рендером, не читанням CSS). */
.hh-avatar.hh-avatar--badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  font-size: 8px;
  border: 2px solid var(--surface);
  box-sizing: content-box;
}
@media (max-width: 767px) {
  .hh-avatar.hh-avatar--badge { width: 16px; height: 16px; font-size: 7px; border-width: 1.5px; }
}

/* Аватарки артистів на Головній X — +40% (Роман, живий фідбек зі скріна
   віджету «Артисти», 14.09.2026: «збільши тут аватарки на +40%»). Лише
   для цього віджета: базовий `.hh-avatar` (32px) лишається спільним для
   товарів/клієнтів/папок/чек-листів по всьому застосунку, тому
   збільшення — модифікатором на список, а не зміною самого `.hh-avatar`.
   32 * 1.4 = 44.8 → 45px. */
.hh-list--artists-home .hh-avatar { width: 45px; height: 45px; font-size: 18px; }
/* Тіло рядка — не колонка й навіть не ряд флексів, а звичайний текстовий
   потік: назва й підпис мають переноситись ОДНИМ абзацом. Флекс-ряд ставив
   підпис новим рядком щоразу, коли той не вліз цілком, — і рядок знову ріс
   на 18px, тобто половина економії поверталась назад. */
.hh-list--checks .hh-list__body {
  display: block;
  line-height: var(--lh-small);
}
.hh-list--checks .hh-list__title {
  display: inline;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--size-small);
}
/* Крапка-роздільник живе в CSS, а не в розмітці: у HTML вона була б четвертою
   одиницею тексту, яку довелося б екранувати й повторювати у двох екранах. */
.hh-list--checks .hh-list__meta::before { content: "·"; margin: 0 0.35em; }
/* Пункт про одну подію читається «Реквізит — Ужгород: Відправлено 0 з 6»
   (власник, 01.10.2026): після міста — двокрапка, не крапка-роздільник.
   Рядок складає design/x-checklist-text.js; тут лише знак між частинами. */
.hh-list--checks .hh-list__title--event + .hh-list__meta::before { content: ":"; margin: 0 0.35em 0 0; }
.hh-list--checks .hh-list__trail {
  width: auto;
  padding-left: 0;
  margin-top: 0;
  text-align: right;
  flex: none;
}

/* --------------------------------------------------------------------------
   9. Модалка й нижній шит

   На десктопі — діалог по центру. На телефоні той самий вміст приїжджає
   знизу: до верху екрана великим пальцем не дотягтись.
   -------------------------------------------------------------------------- */

.hh-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 7, 5, 0.6);
  z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}

.hh-modal {
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
}
.hh-modal__head { padding: var(--sp-4); border-bottom: var(--border-w) solid var(--border-faint); }
.hh-modal__body { padding: var(--sp-4); overflow-y: auto; }
.hh-modal__foot {
  display: flex; gap: var(--sp-2); justify-content: flex-end;
  padding: var(--sp-4); border-top: var(--border-w) solid var(--border-faint);
}

@media (max-width: 767px) {
  .hh-overlay { align-items: flex-end; padding: 0; }
  .hh-modal {
    max-width: none;
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* Клавіатура телефона з'їдає низ екрана — залишаємо запас. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hh-modal__foot { flex-direction: column-reverse; }
  .hh-modal__foot .hh-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   10. Сповіщення: банер і тост

   Банер — стан екрана (немає мережі, період закрито). Тост — наслідок дії
   (зберегли, поставили в чергу).
   -------------------------------------------------------------------------- */

.hh-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--size-small);
  line-height: var(--lh-small);
}
.hh-banner__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }

/* На вузькому екрані дія переїжджає під текст. Поруч вона з'їдає третину
   ширини, і заголовок ламається на три рядки — тобто текст деградує заради
   кнопки, хоча правило вимагає протилежного: спершу переносимо керування
   цілим, і лише потім ріжемо текст. */
@media (max-width: 767px) {
  .hh-banner { flex-wrap: wrap; }
  .hh-banner__body { min-width: 100%; }
  .hh-banner > .hh-btn { margin-top: var(--sp-2); }
}
.hh-banner__title { font-weight: var(--weight-medium); color: var(--text); }

.hh-banner--info   { background: var(--info-quiet);   border-color: var(--info-border);   color: var(--text); }
.hh-banner--ok     { background: var(--ok-quiet);     border-color: var(--ok-border);     color: var(--text); }
.hh-banner--warn   { background: var(--warn-quiet);   border-color: var(--warn-border);   color: var(--text); }
.hh-banner--danger { background: var(--danger-quiet); border-color: var(--danger-border); color: var(--text); }

/* Клікабельний банер (design/inbox-attention.js — "Увага" на "Продаж →
   Онлайн" і на "Головній" веде на вкладку "Комунікації") — той самий
   прийом, що a.hh-card вище: `<a>` замість `<div>` для всього банера,
   скинути типовий вигляд посилання, а не другий колір "як помилка". */
a.hh-banner { display: flex; text-decoration: none; color: inherit; }
a.hh-banner:hover { filter: brightness(0.97); }

/* Каталог медіа (screen-mkt-today.js, вкладка «Медіа») рендерить попередження
   "де саме файл використовується" усередині гріда тайлів (minmax(120px,…)) —
   без цього класу банер успадковує ширину однієї колонки гріда й текст
   переносився по слову (Роман 23.08.2026: "підказка у дуже вузькому попапі").
   `max-width` тут — стеля на широких екранах: сам банер і так розтягнутий на
   всю ширину рядка через `grid-column:1 / -1` в інлайн-стилі виклику. */
.hh-banner--media-blocked { max-width: 640px; }

.hh-toasts {
  position: fixed;
  left: var(--sp-4); right: var(--sp-4);
  bottom: calc(var(--tabbar-h) + var(--sp-4));
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none;
}
@media (min-width: 768px) {
  .hh-toasts { left: auto; right: var(--sp-5); bottom: var(--sp-5); width: 360px; }
}

.hh-toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  font-size: var(--size-small);
  pointer-events: auto;
}
.hh-toast__accent { width: 3px; align-self: stretch; border-radius: var(--radius-full); background: var(--text-muted); flex: none; }
.hh-toast--ok     .hh-toast__accent { background: var(--ok); }
.hh-toast--warn   .hh-toast__accent { background: var(--warn); }
.hh-toast--danger .hh-toast__accent { background: var(--danger); }

/* Плашки оболонки (shell.html, власник 30.09.2026): «Є нова версія CORE —
   Оновити» і «Дані могли змінитися — Оновити дані». Вигляд тоста, але не
   зникає сам і стоїть УГОРІ під топбаром — не на місці тостів унизу, щоб
   не накривати їх і не ховати нижню панель на телефоні. Сторінку не
   перекриває: працювати поруч можна (на відміну від колишнього попапа). */
.hh-app-notices {
  position: fixed;
  top: calc(var(--topbar-h) + var(--sp-2));
  left: var(--sp-4); right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none;
}
@media (min-width: 768px) {
  .hh-app-notices { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100vw - 2 * var(--sp-5))); }
}
.hh-app-notice { pointer-events: auto; }
.hh-app-notice__text { flex: 1 1 auto; min-width: 0; }
.hh-app-notice .hh-btn { flex: none; }

/* --------------------------------------------------------------------------
   11. Стани: завантаження, порожнеча, помилка

   Три стани, які найчастіше забувають, і саме через них система здається
   зламаною. Кожен екран зобов'язаний мати всі три.
   -------------------------------------------------------------------------- */

/* Скелетон повторює форму майбутнього вмісту, а не крутиться спінером:
   так око вже знає, куди дивитись, коли дані приїдуть. */
.hh-skeleton {
  background: linear-gradient(90deg,
    var(--surface-hover) 0%,
    var(--surface-active) 50%,
    var(--surface-hover) 100%);
  background-size: 200% 100%;
  animation: hh-shimmer 1.4s var(--ease) infinite;
  border-radius: var(--radius-sm);
  height: 1em;
}
.hh-skeleton--title { height: 1.5em; width: 45%; }
.hh-skeleton--line  { height: 1em;   width: 100%; }
.hh-skeleton--short { height: 1em;   width: 60%; }
.hh-skeleton--num   { height: 1em;   width: 80px; margin-left: auto; }

@keyframes hh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hh-skeleton { animation: none; background: var(--surface-hover); }
}

.hh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}
/* Заголовок порожнього стану — Montserrat, хоч текст і наш: це речення, а не
   назва розділу. «ДОСТУП ЩЕ НЕ НАЛАШТОВАНИЙ» капсом читається як помилка
   системи, а не як пояснення. */
.hh-empty__title { font-size: var(--size-h3); font-weight: 600; color: var(--text); }
.hh-empty__body  { max-width: 44ch; }

/* Компактний варіант — маленький підрозділ картки (напр. «Замовлень ще
   немає» на картці клієнта), не повноекранний порожній стан: --sp-7
   (48px) відступу зверху й знизу займав забагато місця в двоколонковому
   макеті (Роман, живий тест 07.09.2026). Заголовок — той самий розмір,
   що звичайний текст картки, не окремий hh-empty__title (--size-h3 тут
   недоречний — це не порожня сторінка, а один рядок посеред іншого
   контенту). */
.hh-empty--compact {
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-1);
}
.hh-empty--compact .hh-empty__title { font-size: var(--size-small); font-weight: 600; }

.hh-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: hh-spin 700ms linear infinite;
}

/* --------------------------------------------------------------------------
   12. Вкладки
   -------------------------------------------------------------------------- */

.hh-tabs {
  display: flex;
  gap: var(--sp-1);
  /* РЯД ЗАКЛАДОК ПРОКРУЧУЄТЬСЯ ЛИШЕ ВБІК — ніколи вертикально.

     Власник, 30.09.2026, «Онлайн» (і далі по всьому CORE, найгірше з
     телефона): рядок «Головна · Замовлення · Кошики…» і «Нові · Мої ·
     Очікують» колесом/тачпадом/пальцем прокручувався ВГОРУ всередині
     себе — «Головна» видно наполовину, або текст зникав зовсім.

     Причин було дві, і лагодить їх лише пара правил разом:

     1. `overflow-x: auto` сам по собі робить і `overflow-y` прокручуваним
        (специфікація: якщо одна вісь не visible, visible на другій стає
        auto). А вміст був на 1px вищий за смугу: закладка мала
        `margin-bottom: -1px`, щоб її підкреслення лягало поверх
        border-bottom смуги, — тобто виступала за padding-box. Цього
        пікселя вистачало, щоб колесо над смугою крутило саму смугу.
        Тепер `overflow-y: hidden`, а нижня лінія — inset-тінь ВСЕРЕДИНІ
        смуги (не border), тож підкреслення активної закладки лягає
        поверх неї без жодного від'ємного відступу й нічого не виступає.

     2. Прокручуваний блок у flex-колонці має min-height: auto → 0, тож
        батько-колонка з фіксованою висотою (вкладка «Комунікації»:
        #page і .hh-comms-embed — flex-column на 100dvh, shell.css)
        СТИСКАЛА смугу до ~10px при 44px вмісту — 34px вертикальної
        прокрутки й «Головна», зрізана згори. `flex-shrink: 0` — висота
        смуги завжди за вмістом, у будь-якому батьку.

     `overflow-y: clip` тут неможливий: у парі з `overflow-x: auto` він за
     специфікацією обчислюється в hidden. hidden не прокручується ні
     колесом, ні пальцем — вертикальний жест іде сторінці.
     Тест: tests/design-tabs-no-vertical-scroll.test.js. */
  box-shadow: inset 0 calc(-1 * var(--border-w)) 0 var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  /* Горизонтальний свайп по смузі не віддається сторінці/браузеру (жест
     «назад» на телефоні, коли смуга доїхала до краю). */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Ряд закладок ширший за екран — норма на телефоні: картка туру несе сім
     закладок (513px у 343px), картка події п'ять (389px у 343px). Прокрутка
     працювала й до цього, але НІЩО на екрані про неї не казало: остання
     видима закладка виглядала як остання взагалі.

     Роман, 03.09.2026, «Джамала: Чернівці» з телефона — питання було
     буквально «ці всі закладки неактивні взагалі?». Ні, вони працюють; не
     працювала підказка, що ряд продовжується.

     Той самий фейд, що вже стоїть на .hh-subbar (shell.css) — і з тієї ж
     причини лише правий: зліва ряд починається впритул до краю сторінки, і
     фейд там з'їдав би першу закладку ще до будь-якої прокрутки.

     Маска не заважає прокрутці й не робить закладку недосяжною — вона лише
     показує, що за краєм щось є; підвозить активну закладку у видиме
     keepActiveStripItemVisible() (shell.html). */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--sp-6)), transparent);
  mask-image: linear-gradient(to right, black calc(100% - var(--sp-6)), transparent);
}
.hh-tabs::-webkit-scrollbar { display: none; }

/* Фейд потрібен, лише поки ряд справді довший за екран. На десктопі сім
   закладок вміщаються, і маска там дарма гасила б хвіст останньої. */
@media (min-width: 768px) {
  .hh-tabs { -webkit-mask-image: none; mask-image: none; }
}

.hh-tab {
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--size-small);
  cursor: pointer;
  white-space: nowrap;
  /* Без від'ємного margin-bottom: лінія смуги — inset-тінь усередині
     .hh-tabs, підкреслення (2px) лягає поверх неї й не виступає за межі
     смуги (інакше — 1px вертикальної прокрутки, див. .hh-tabs). */
  flex: none;
  border-bottom: 2px solid transparent;
}
.hh-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

/* Телефон: другий рівень (вкладки екрана) компактніший і тихіший за перший
   (.hh-subbar у shell.css): caption, вужчі поля, зона тапу --touch. */
@media (max-width: 767px) {
  .hh-tab { min-height: var(--touch); padding: 0 var(--sp-2); font-size: var(--size-caption); }
}

/* «Маркетинг → Сайт» (11.10.2026) — смуга вкладок, яку малює оболонка
   (siteTabsHtml(), shell.html): верхній рівень — .hh-tabs, «Управління» —
   сегменти другим рядом. Вкладки — посилання (<a>), щоб Cmd+клік відкривав
   вкладку окремо, тож підкреслення тексту й вирівнювання — тут. Сегментів
   вісім: на телефоні переносяться рядками, а не стискаються до нечитаного. */
.hh-site-tabbar { margin-bottom: var(--sp-4); }
.hh-site-tabbar .hh-section-head { margin-bottom: var(--sp-2); }
a.hh-tab, a.hh-segmented__item {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.hh-site-subtabs { margin-top: var(--sp-3); flex-wrap: wrap; }
.hh-site-subtabs .hh-segmented__item { white-space: nowrap; }

/* --------------------------------------------------------------------------
   13. Дрібне
   -------------------------------------------------------------------------- */

.hh-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--danger); color: var(--bg);
  font-size: var(--size-caption); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.hh-avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-full);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--size-caption); font-weight: var(--weight-medium);
  overflow: hidden;
}
/* Фото артиста (задача Романа, скріншот віджету «Артисти» на X · Головна,
   14.09.2026) — та сама кругла плашка `.hh-avatar`, лише замість ініціалів
   <img>, той самий прийом, що `.hh-comm-avatar__photo` у комунікаціях:
   object-fit:cover заповнює кружечок без спотворення. Немає фото —
   рендериться сам `.hh-avatar` з ініціалами всередині, картинка сюди
   просто не підставляється, той самий фолбек-контракт, що скрізь. */
.hh-avatar__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Аватар артиста в заголовку картки туру/події (Роман, 14.09.2026,
   зліва від імені артиста в `.hh-h1`) — той самий кружечок 32px, лише
   вирівняний по рядку тексту заголовка (inline-flex у потоці `<p>` без
   vertical-align спливає над базовою лінією літер) і з відступом до
   наступного сегмента крихти. */
.hh-avatar--header { vertical-align: middle; margin-right: var(--sp-2); margin-top: -3px; }
/* Малий аватар події (19.09.2026) — рядок таблиці «Продаж → Події»:
   24px/9px, той самий розмір, що вже мають записи Календаря X
   (.hh-cal-chip__avatar), щоб рядок таблиці не виріс за свої ~36px. */
.hh-avatar--sm { width: 24px; height: 24px; font-size: 9px; }
/* Аватар папки в «Матеріалах» (issues-log #117, друге зауваження Романа
   21.08.2026: «не подібне на файлову систему») — той самий круглий
   контейнер, що й ініціали товару/клієнта, тому папка мусить читатись
   інакше з першого погляду: не брендовий колір рядка-даних, а тепліший
   нейтральний тон (той самий --surface-hover, що курсор/hover рядка) під
   емодзі-текою, і трохи більший кегль під сам символ. */
.hh-avatar--folder {
  background: var(--surface-hover);
  font-size: 16px;
}
/* Збільшений аватар для шапки попапу (Роман, 15.09.2026, попап артиста на
   «X · Головна»: «нагорі є аватарка артиста — збільшити її»). Модифікатор
   на самому аватарі, а не ще один списковий, як
   `.hh-list--artists-home .hh-avatar`: там збільшується КОЖЕН аватар
   списку, тут — один конкретний у заголовку, і прив'язувати його до класу
   контейнера означало б завести контейнерний клас лише заради розміру.
   56px — між 45px списку «Артисти» (звідки людина сюди й клікнула) і
   висотою рядка заголовка: помітно більший за той, що в списку, але
   заголовок попапу лишається одного рядка заввишки. */
.hh-avatar--lg { width: 56px; height: 56px; font-size: 22px; }

/* Збільшений аватар ПОДІЇ (власник, 19.09.2026: лого «ВСІ.СВОЇ» у
   32px-кружечку ледве читається). Один спільний клас на два місця —
   картку «Офлайн-події» Головної CORE (offlineEventRow) і шапку лендінгу
   події (screen-x-event.js headerEventAvatarHtml), щоб розміри не
   розійшлись. Розмір — одна змінна --event-avatar, щаблі лише
   перевизначають її. Інші екрани (X-колонка Головної, реєстр, Календар X)
   цього класу не отримують і лишаються базовими 32/24px.
   Головна: 72px на десктопі — поруч із двома-трьома рядками картки
   (назва, мета, відповідальний), по центру; на телефоні 56px (--lg),
   бо ширина рядка там дорожча.
   Шапка лендінгу (--event-hero): 92px на десктопі — поруч з h1 і
   рядками мети, 64px на телефоні.
   23.09.2026 (власник: «блок трохи завеликий») — 72px виявився занадто
   помітним у самому списку картки «Офлайн-події» на Головній (не в шапці
   лендінгу — --event-hero тут не чіпаємо, там простір інший). Зменшено
   до 56px/44px — досі помітно більше за базовий .hh-avatar (32px), лого
   лишається читабельним, лише не домінує над трьома рядками тексту
   картки. */
.hh-avatar--event {
  --event-avatar: 56px;
  width: var(--event-avatar); height: var(--event-avatar);
  font-size: calc(var(--event-avatar) * 0.3);
}
.hh-avatar--event-hero { --event-avatar: 92px; }
@media (max-width: 767px) {
  .hh-avatar--event { --event-avatar: 44px; }
  .hh-avatar--event-hero { --event-avatar: 64px; }
}
/* Шапка лендінгу події: аватар ліворуч від УСЬОГО блоку заголовка
   (назва з діями + мета + адреса), по центру його висоти. */
.hh-event-head { display: flex; align-items: center; gap: var(--sp-3); }
.hh-event-head__body { flex: 1; min-width: 0; }
/* Лого події — не аватар людини. Словесні знаки широкі, і коло обрізає
   їхні краї, тож форма — заокруглений квадрат (--radius-lg), картинка —
   object-fit:contain з малим відступом на постійно світлому тлі
   (--brand-milk, не --surface: темне лого на темній темі зникло б).
   Фото артиста й ініціали лишаються кругом. */
.hh-avatar--logo {
  border-radius: var(--radius-lg);
  background: var(--brand-milk);
  border: var(--border-w) solid var(--border-faint);
  padding: var(--sp-1);
}
.hh-avatar--logo .hh-avatar__photo { object-fit: contain; }

/* Два чіпи стану туру один під одним (Роман, 15.09.2026: «якщо в переліку
   і такі, і такі події — писати два статуси один під одним»). Колонка, а не
   перенос рядка: чіпи різної ширини при wrap вирівнялись би по лівому
   краю й «поїхали» від правого краю рядка, де око їх шукає. */
.hh-tour-status-chips {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-1); flex: none;
}

/* Аватар-стан для чек-листів готовності (тур і подія).
   ---------------------------------------------------------------------------
   Раніше кружечок був брендового кольору з хрестиком усередині — на ВСІХ
   пунктах однаково, і поруч із зеленим «готово» це читалось як «не
   зроблено». Тон тут іде за тим самим словником, що вже мають чіпи стану
   (.hh-chip--ok/--warn/--danger), тобто колір пункту й колір його підпису
   не можуть розійтись: вони обидва походять від одного `state`.

   Приглушені фони (--ok-quiet і компанія), не насичені: у списку з шести
   рядків шість яскравих кружечків перетягують увагу на себе й ховають
   саме той рядок, заради якого людина сюди дивиться. Тут потрібен спокійний
   фон і виразний знак. */
.hh-avatar--ok     { background: var(--ok-quiet);     color: var(--ok); }
.hh-avatar--warn   { background: var(--warn-quiet);   color: var(--warn); }
.hh-avatar--danger { background: var(--danger-quiet); color: var(--danger); }

/* ДВІ КОЛОНКИ — ЛИШЕ ТАМ, ДЕ ВОНИ ВЛАЗЯТЬ.
   ---------------------------------------------------------------------------
   «Реєстр зліва, картка справа» — правильний десктопний макет, і екрани
   писали його інлайном: `grid-template-columns:1fr 1fr`. Без умови на
   ширину це та сама сітка й на телефоні, де кожна колонка виходить ~170px:
   сегментний фільтр «усі / чекають / чернетки / на правках / прийняті»
   перестає вміщатись, тисне в правий край без відступу й переносить
   підписи у два рядки (аудит X, 03.09.2026, екран «X · Звіти» на 360px).

   Одна колонка до 768px — та сама межа, на якій ховається смуга
   підрозділів (shell.css) і розгортаються плитки: у системі один поріг
   «телефон/десктоп», а не свій у кожного екрана. */
.hh-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  align-items: start;
}
@media (min-width: 768px) {
  .hh-split { grid-template-columns: 1fr 1fr; }
}

/* Ряд «Комітент + чинні ставки» картки артиста (screen-artists.js
   renderRoyaltyPartnerBar, 14.09.2026) — на десктопі це грід 220px 1fr
   (вузька підписова колонка зліва, суми праворуч), на телефоні той самий
   грід лишав 220px під підпис і стискав праву частину до нечитабельної
   смуги — суми йшли за правий край екрана (живий скріншот Романа). Один
   стовпчик до 768px, той самий поріг, що `.hh-split` вище. */
.hh-royalty-partner-bar {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .hh-royalty-partner-bar { grid-template-columns: 220px 1fr; }
}
.hh-royalty-partner-bar > div:first-child {
  border-right: none;
  border-bottom: var(--border-w) solid var(--border);
}
@media (min-width: 768px) {
  .hh-royalty-partner-bar > div:first-child {
    border-right: var(--border-w) solid var(--border);
    border-bottom: none;
  }
}

/* Швидка навігація закладки «Роялті» картки артиста (власник 03.10.2026:
   акти — внизу довгої сторінки). Липка смуга ПІД шапкою застосунку
   (top: var(--topbar-h), та сама причина, що .hh-reconciliation-table
   thead вище: top:0 ховав би її під непрозору .hh-topbar). Непрозорий фон
   сторінки — рядки під нею не просвічують. Ряд прокручується лише вбік
   (той самий рецепт, що .hh-tabs): на 375px п'ять пунктів не лізуть у
   рядок, але сторінка вбік не їде. Пункти — звичайні ghost-кнопки з
   підписом, без підказок лише при наведенні. */
.hh-royalty-jump {
  position: sticky;
  top: var(--topbar-h);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px; /* = 44px у scroll-margin-top якорів нижче */
  margin-bottom: var(--sp-3);
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hh-royalty-jump::-webkit-scrollbar { display: none; }
.hh-royalty-jump .hh-btn { flex: none; white-space: nowrap; }
@media (min-width: 768px) {
  /* «Підсумок» на широкому екрані — права колонка поруч угорі, стрибати
     до нього нема куди; на телефоні він під усім іншим. */
  .hh-royalty-jump__item--phone { display: none; }
}
/* Якорі секцій: прокрутка зупиняється під шапкою застосунку І під самою
   смугою навігації, а не ховає заголовок секції під ними. */
.hh-royalty-anchor {
  scroll-margin-top: calc(var(--topbar-h) + 44px + var(--sp-2));
}
.hh-royalty-anchor:focus { outline: none; }

/* Модифікатор 66/33 — X Головна, колонка «Артисти» (Роман, 11.09.2026):
   поруч з операційним блоком зліва список артистів не потребує
   половини ширини. `fr`, не `%`, з тієї самої причини, що й
   `.hh-home-split` нижче — ділить лише простір після gap. */
.hh-split--2-1 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .hh-split--2-1 { grid-template-columns: 2fr 1fr; }
}

/* X Головна: мобільний порядок блоків відрізняється від десктопного
   (Роман, 14.09.2026, живий репорт із телефону) — Артисти → Тури →
   Найближче → Потребує уваги, тоді як десктопна двоколонка (`.hh-split
   .hh-split--2-1` вище, 768px+) лишається як є: Роман явно попросив
   правити ЛИШЕ мобільний порядок, не двоколонку саму (узгоджена раніше,
   #2237/#2391).

   `display:contents` на `.x-home-col` — обгортка колонки зникає з
   дерева грід-елементів (сам грід `.hh-split` не чіпається), її діти
   `.x-home-block` стають прямими елементами грід-контейнера й лише тоді
   на них можна виставити власний `order`. Вище 768px `.x-home-col`
   лишається звичайним block-елементом (грід-клітинкою колонки) — `order`
   там ні на що не впливає, бо застосований лише всередині цього самого
   медіазапиту. */
@media (max-width: 767px) {
  .x-home-split > .x-home-col { display: contents; }
  .x-home-split .x-home-block--live { order: 0; }
  .x-home-split .x-home-block--artists { order: 1; }
  .x-home-split .x-home-block--upcoming { order: 2; }
  .x-home-split .x-home-block--attention { order: 3; }
}

/* X Головна, права колонка: «Артисти» → «Термінали» → «Актуальні тури»
   (живий баг 12.10.2026: картка артистів, що закінчується «Христина
   Соловій», прилипала до «Термінали · 8» без проміжку). Стандартний
   проміжок між картками — var(--sp-4), той самий, що вже стоїть між
   «Термінали» й «Актуальні тури». Сусідній селектор, а не flex-gap:
   вертикальні маржини в block-потоці колапсують, тож наявні
   margin-bottom у .hh-xt-card і inline margin-top у «Актуальні тури»
   (обидва --sp-4) не подвоюють проміжок. Діє на всіх ширинах — на
   мобільному .x-home-block--artists лишається одним грід-елементом, і
   картки всередині нього так само йдуть block-потоком. */
.x-home-block--artists > .hh-card + .hh-card { margin-top: var(--sp-4); }

/* --- Головна: двоколонковий layout операційне/X ----------------------------
   checklist-home-fixes.md (Роман, 06.09.2026, Етап 2) — одна колонка
   нижче 1200px (НЕ 768px, що на цій сторінці лишало б праву колонку X
   завузькою задовго до мобільного вигляду решти CORE), НЕ `.hh-split`
   вище (та рівна 1fr/1fr і перемикається на 768px).

   `60% 40%`, не фіксовані `340px` (instruction-home-x-integration.md
   §1, Роман, 06.09.2026): фіксована права колонка на широких моніторах
   лишалась вузькою смужкою, хоч даних у X не менше, ніж зліва — тепер
   обидві частини масштабуються разом зі сторінкою. Поріг 1200px, на
   якому колонки стають поруч, лишається той самий, що й раніше. */
.hh-home-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  align-items: start;
}
@media (min-width: 1200px) {
  /* `fr`, не `%` — з `gap` разом `60% 40%` рахує 100% контенту ПЛЮС
     gap понад контейнер, і колонки переповнюють/стискаються
     непередбачувано залежно від ширини вікна (живий баг, Роман
     06.09.2026). `fr` ділить лише простір, що лишився ПІСЛЯ віднімання
     gap — тому 60/40 тримається точно на будь-якій ширині. */
  .hh-home-split { grid-template-columns: 60fr 40fr; }
}

/* --- Головна: панель «Потребує уваги» -------------------------------------
   Власник, 11.10.2026 (докстрінг homeTopZone() у design/screen-home.js):
   замість стовпчика різнокольорових банерів — одна панель на всю ширину,
   кожне попередження — один компактний рядок: крапка рівня, заголовок із
   числом, дія праворуч, шеврон з подробицями. Під панеллю — «Мої завдання»
   на всю ширину, тож «Онлайн»/«Шоуруми» підіймаються на перший екран.

   Рядок — це сам банер (той самий зовнішній тег .hh-banner--danger/warn),
   тож тут скидається його заливка, рамка й інлайновий margin-bottom
   (`!important` — він інлайновий). Кольори — лише токени (--danger,
   --warn, --text-muted, --border-faint), тож темна тема — та сама.

   Телефон — одна колонка; дія переноситься під заголовок, коли рядку
   тісно (`flex: 1 1 12rem` у заголовка). Від 1024px рядки — у дві
   колонки; розгорнутий рядок займає всю ширину панелі. */
.hh-attn { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.hh-attn__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-2);
}
.hh-attn__title {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--lh-small);
  font-weight: var(--weight-bold);
  color: var(--text);
}
.hh-attn__count { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.hh-attn__count--critical { color: var(--danger); font-weight: var(--weight-medium); }
.hh-attn__sep { font-size: var(--size-caption); color: var(--text-faint); }
.hh-attn__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-5); }

.hh-attn .hh-notice {
  display: block;
  margin: 0 !important;
  padding: var(--sp-2) 0;
  border: 0;
  border-top: var(--border-w) solid var(--border-faint);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  filter: none;
}
.hh-notice__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.hh-notice__dot {
  flex: none;
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--warn);
}
.hh-notice--critical .hh-notice__dot { background: var(--danger); }
.hh-notice__title { flex: 1 1 12rem; min-width: 0; }
.hh-notice__title .hh-banner__title { font-weight: var(--weight-medium); }
.hh-notice__acts { flex: none; display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.hh-notice__acts > .hh-btn { white-space: nowrap; }
.hh-notice__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--size-caption);
  cursor: pointer;
}
.hh-notice__toggle--label { padding-inline: var(--sp-2); }
/* Телефон/планшет — повна зона дотику --touch для шеврона. */
@media (max-width: 1023px) {
  .hh-notice__toggle { min-width: var(--touch); min-height: var(--touch); justify-content: center; }
}
.hh-notice__toggle:hover { background: var(--surface-hover); color: var(--text); }
.hh-notice__toggle svg { transition: transform var(--dur) var(--ease); }
.hh-notice__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hh-attn .hh-notice__more {
  display: none;
  gap: var(--sp-1);
  max-height: 20rem;
  overflow: auto;
  padding: var(--sp-1) 0 0 calc(var(--sp-2) + var(--sp-2));
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}
/* Розгорнутий рядок лишається у своїй колонці (власник 12.10.2026: коли
   він розтягувався на всю ширину, решта рядків перестрибувала в інші
   клітинки — «інші кудись поїхали»). Тепер зсуваються лише рядки нижче,
   кожен на своєму місці. */
.hh-attn .hh-notice[data-notice-open] > .hh-notice__more { display: flex; flex-direction: column; }
.hh-notice__more summary { display: none; }
.hh-notice__more ul { margin: 0 !important; }
.hh-notice__more strong { color: var(--text); font-weight: var(--weight-medium); }
@media (min-width: 1024px) {
  /* Без щільного автозаповнення гріду (dense): воно підтягувало пізніші рядки в дірку
     перед розгорнутим — попередження могло стати над критичним. Порядок
     DOM (критичні першими) важливіший за порожню клітинку. */
  .hh-attn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Десктоп (миша): кнопка дії — у висоту рядка; на телефоні лишається
     повна зона дотику --touch. */
  .hh-notice__acts > .hh-btn {
    min-height: 0;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--size-caption);
    line-height: var(--lh-caption);
  }
}

/* --- Головна: бренд-акцент X у правій колонці ------------------------------
   instruction-home-x-integration.md §2 (Роман, 06.09.2026), mockup-home-
   rebrand.html. Колір `--x-moss`/`--x-moss-tint` (design/tokens.css) і файл
   логотипу `logo-hygge-hoodie-x-moss.png` (design/logo/) визначає й
   підтримує розробник розділу X (instruction-x-section-rebrand.md, #1991)
   — тут лише використовуються готовими, не створюються заново. */
.hh-home .x-col {
  background: var(--x-moss-tint);
  border-left: 3px solid var(--x-moss);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--sp-4) var(--sp-4) 20px 18px;
}
.hh-home .x-logo-link {
  display: inline-block;
  margin-bottom: var(--sp-3);
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}
.hh-home .x-logo-link:hover { opacity: .75; }
/* 16px, не 24px (Роман, живий скріншот 06.09.2026: "надто велике") —
   .hh-home скоуплено на компактну щільність (Етап 1 нижче: 12-14px
   текст, малі числа), 24px-лого поруч виглядав непропорційно великим. */
.hh-home .x-logo-link img { height: 16px; display: block; }

/* --- Головна: щільність екрана (instruction-design-scale.md,
   checklist-home-fixes.md Етап 1) --------------------------------------
   Скоуплено класом `.hh-home`, НЕ змінені самі токени (--size-h1, --sp-*
   тощо): вони спільні на весь застосунок (~100+ екранів), і правка тут
   мала торкнутись лише Головної, а не кожного екрана, що використовує
   `.hh-card`/`.hh-h2`/`.hh-stat__value`. Values — з mockup-home-v4.html:
   заголовок секції 12px uppercase, картка 13px 14px, велике число не
   більше 19px. */
.hh-home .hh-card { padding: 13px 14px; }
.hh-home .hh-h2 {
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}
.hh-home .hh-stat__value {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.3;
}

/* Картки корпоративних проєктів (checklist-home-fixes.md Етап 4.4,
   мокап `.deals`) — ширші мінімальні клітини за `.hh-grid--fill`
   (160px), бо картка тут несе рядок із шістьма стадіями, не самі числа.
   Окремий клас, не правка `.hh-grid--fill`: та використовується по
   всьому застосунку для КОРОТКИХ карток (KPI, локації), і 290px там
   зробив би порожні розтягнуті клітини.

   ОДНА КОЛОНКА, НЕ СІТКА (Роман, 09.09.2026: "горизонтальними блоками на
   всю ширину доступного місця, не квадратами"). Попередній auto-fit
   (repeat(auto-fit, minmax(290px, 1fr))) при 2+ проєктах розкладав їх по
   колонках — картка звужувалась до ~290-450px, і назва/стадії/підвал
   (foot: аватар · наступна дія · дедлайн) щоразу переносились у кілька
   рядків, картка ставала на вигляд квадратом. Один рядок на проєкт, на
   всю ширину блоку — foot має місце розкластись в один рядок навіть при
   довгій назві наступного кроку, тексту не тісно. */
.hh-home .hh-corporate-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.hh-home .hh-corporate-card {
  display: block;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 14px;
  background: var(--surface);
  /* instruction-home-responsive.md (Роман): весь рядок клікабельний —
     картка тепер <a href="?s=corporate-projects&open=..."> (screen-
     home.js corporateProjectCard()), тому знімаємо стандартне
     підкреслення/синій колір посилання, той самий скид, що вже
     .hh-list__item. */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.hh-home .hh-corporate-card:hover { background: var(--surface-hover); }
/* Проблемна картка — кольорова рамка (Етап 4.3): червона при простої
   понад поріг, бурштинова при простроченій оплаті. Тон визначає
   БЕКЕНД (days_without_movement/next_due_date вже пораховані на
   сервері, §14 CLAUDE.md) — тут лише читання готового прапорця. */
.hh-home .hh-corporate-card--danger { border-color: var(--danger); }
.hh-home .hh-corporate-card--warn   { border-color: var(--warn); }
.hh-home .hh-corporate-card__stage-row { display: flex; gap: 3px; flex-wrap: wrap; margin: var(--sp-2) 0; }
.hh-home .hh-corporate-card__foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  border-top: var(--border-w) solid var(--border-faint);
  padding-top: var(--sp-2); margin-top: var(--sp-2);
  font-size: 10.5px; color: var(--text-muted);
}

/* Мініатюри опублікованих фото в рядку публікації (pubThumbRow,
   screen-products.js, issue #479, Роман: «на десктопі трохи збільшити
   піктограми фото, зараз надто дрібні»). 32px лишається на мобільному —
   тепер ряд показує ВСІ обрані фото, а не перші 5 (§13 CLAUDE.md, польова
   робота з телефону), тож дрібний розмір там навмисний: більший тайл при
   довгому ряду переносив би рядок і ховав кнопки дій. На десктопі (де
   переносу боятись нема) — clamp замість фіксованого пікселя, щоб трохи
   рости на дуже широких екранах, не лише різко стрибати на 768px. */
.hh-pub-thumb {
  width: 32px; height: 32px; flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
  .hh-pub-thumb { width: clamp(48px, 4vw, 56px); height: clamp(48px, 4vw, 56px); }
}
.hh-pub-thumb--video { background: #000; }

.hh-kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
.hh-kv__k { color: var(--text-muted); font-size: var(--size-small); }
.hh-kv__v { text-align: right; font-variant-numeric: tabular-nums; }
/* Рядок блоку «Доставка» замовлення, що змінюється кліком (711, власник
   04.10.2026: дата й адреса клікабельні). Наведення на телефоні немає —
   підкреслення значення видно завжди; закритий рядок — курсор-питання,
   клік показує причину (data-act="kv-locked-hint"). */
.hh-kv--editable { cursor: pointer; border-radius: var(--radius-sm); }
.hh-kv--editable .hh-kv__v { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--text-faint); }
.hh-kv--editable:hover { background: var(--surface-hover); }
.hh-kv--locked { cursor: help; }
.hh-kv--editing { align-items: center; flex-wrap: wrap; }

/* КОМПАКТНИЙ БЛОК «ПІДПИС — ЗНАЧЕННЯ» У КАРТЦІ (картка клієнта, власник
   05.10.2026: «блоки неохайні, не по дизайн-коду, не компактні»). Раніше
   «Контакти» й «Портрет клієнта» стояли голими .hh-kv по 8px зверху/знизу
   в картці з 16px полями, значення — звичайний inline-текст: чіп «не
   перевірено кодом» і кошик 44×44 не влазили в рядок і кошик переносився
   окремим рядком під чіп.
   Тепер — один рецепт на обидва блоки (01-rules/instruction-design-scale.md
   §3/§4): рядок ≈34px із тонкою лінією між рядками, підпис 12px
   приглушений, значення 13px праворуч ОДНИМ рядком — текст значення
   обрізається трикрапкою (.hh-kv__text, повне — у title), чіп і дія не
   переносяться. Кошик — .hh-icon-btn--row: зона кліку 32×32 (40×40 на
   телефоні, §7.6) з від'ємним margin, тож висота рядка від неї не росте. */
.hh-card--dense { padding: var(--sp-1) 14px; }
/* Картка сайдбару з власною версткою (роль, розсилки, взаєморозрахунки) —
   поля 12px 14px (01-rules §4: «13px 14px»), не 16px загальної .hh-card. */
.hh-card--compact { padding: var(--sp-3) 14px; }
.hh-kv-list > .hh-kv {
  align-items: center;
  min-height: 34px;
  padding: 6px 0;
  border-top: var(--border-w) solid var(--border-faint);
}
.hh-kv-list > .hh-kv:first-child { border-top: 0; }
.hh-kv-list .hh-kv__k { flex: none; font-size: var(--size-caption); line-height: var(--lh-caption); }
.hh-kv-list .hh-kv__v {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--size-small);
  line-height: var(--lh-small);
}
.hh-kv__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-kv__meta { color: var(--text-muted); font-size: var(--size-caption); white-space: nowrap; }
.hh-kv-list .hh-chip { flex: none; white-space: nowrap; }
.hh-kv__link { display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: var(--text); text-decoration: none; }
.hh-kv__link:hover, .hh-kv__link:focus-visible { color: var(--accent); }
.hh-kv__link:hover .hh-kv__text { text-decoration: underline; text-underline-offset: 2px; }
/* Зовнішнє посилання (профіль Instagram/Telegram) — стрілка ↗ поруч,
   відкривається в новій вкладці. */
.hh-ext { color: var(--text-muted); font-size: var(--size-caption); flex: none; }
.hh-icon-btn--row { width: 32px; height: 32px; margin: -6px -8px -6px -4px; flex: none; }
.hh-icon-btn--row svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .hh-icon-btn--row { width: 40px; height: 40px; margin: -10px -12px -10px -6px; }
}
/* Розділювач секцій усередині однієї картки (портрет: зведення / підказки /
   «Мій стиль» / сегменти). */
.hh-card-divider { border: 0; border-top: var(--border-w) solid var(--border-faint); margin: var(--sp-2) 0; }
/* Зведення портрета одним рядком: «З нами з 2025 · 7 покупок · …». */
.hh-client-summary { margin: 0; padding: var(--sp-2) 0; font-size: var(--size-small); line-height: var(--lh-small);
  font-weight: var(--weight-medium); color: var(--text); font-variant-numeric: tabular-nums; }
.hh-client-summary__since { color: var(--text-muted); font-weight: 400; }

/* «Комунікація» на картці клієнта (власник 05.10.2026) — розмови клієнта
   по каналах. Рядок-посилання в «Онлайн → Комунікації»: значок каналу
   16px, назва з логіном, нижче — остання активність; праворуч статус-чип
   (01-rules §7.5). Без права на «Комунікації» — той самий рядок без
   посилання (div). */
.hh-conv-list { display: flex; flex-direction: column; }
.hh-conv-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 6px 0;
  border-top: var(--border-w) solid var(--border-faint);
  color: inherit;
  text-decoration: none;
}
.hh-conv-item:first-child { border-top: 0; }
a.hh-conv-item:hover .hh-conv-item__title { color: var(--accent); text-decoration: underline; }
.hh-conv-item__icon { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; }
.hh-conv-item__icon svg { width: 18px; height: 18px; display: block; }
.hh-conv-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hh-conv-item__title { font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Мета не обрізаємо — дата й «N тому» важливіші за ширину; у вузькій
   колонці переноситься другим рядком. */
.hh-conv-item__meta { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.hh-conv-item .hh-chip { flex: none; white-space: nowrap; }
/* Уривок останнього повідомлення (07.10.2026) — один рядок, «…». */
.hh-conv-item__snippet { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-conv-empty { margin: 0; padding: var(--sp-2) 0; font-size: var(--size-small); color: var(--text-muted); }

/* Зведення дня «Разом сьогодні» — Онлайн → Головна (screen-online.js
   summaryBlock, власник 01.10.2026: «оптимізуй цей блок, хай займає менше
   місця… можна в два стовпчики»). Раніше — одна колонка рядків .hh-kv на
   всю ширину: сума, порівняння, замовлення, чек, «По колекціях» і кожна
   колекція окремим рядком по 8px зверху/знизу, тож картка росла вниз на
   кожну колекцію.
   Тепер ліворуч — ключові цифри (сума великим, під нею порівняння з днем
   тижня, нижче «Замовлень»/«Середній чек» парою в одному рядку), праворуч —
   колекції компактним списком. Один стовпчик до 768px — той самий поріг
   «телефон/десктоп», що .hh-split; на телефоні щільність тримають пара
   «Замовлень/Середній чек» поруч і рядки колекцій по 3px. */
.hh-day-summary { padding: 13px 14px; margin: var(--sp-3) 0; }
.hh-day-summary__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: start;
}
@media (min-width: 768px) {
  .hh-day-summary__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
/* min-width:0 — без нього довга назва колекції чи рядок порівняння
   розпирає колонку гріда ширше за 1fr. */
.hh-day-summary__main,
.hh-day-summary__side { min-width: 0; }
/* Головне число блоку — 17–19px/700 (дизайн-код §3), не .hh-stat__value
   (20px, понад межу). */
.hh-day-summary__total {
  display: block;
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.hh-day-summary__pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.hh-day-summary__pair { display: flex; flex-direction: column; gap: 2px; }
.hh-day-summary__pair-v { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
/* Права колонка відділена лінією: зверху на телефоні, зліва на десктопі. */
.hh-day-summary__side { border-top: var(--border-w) solid var(--border-faint); padding-top: var(--sp-2); }
@media (min-width: 768px) {
  .hh-day-summary__side { border-top: none; padding-top: 0; border-left: var(--border-w) solid var(--border-faint); padding-left: var(--sp-4); }
}
.hh-day-summary__side .hh-kv { padding: 3px 0; }
.hh-day-summary__foot { margin-top: var(--sp-2); text-align: right; }

/* --------------------------------------------------------------------------
   Довгий список: 13 тисяч рядків

   На чотирьох рядках виглядає добре що завгодно. Список людей із торговельної
   1С — 12 832 записи, з KeyCRM — 13 503, і це ті самі люди. Тому список
   малюється проти реального обсягу, а не проти зручного.

   Рядки однакової висоти — умова, а не спрощення: без неї не порахувати, які
   саме рядки зараз видно, і доведеться тримати в пам'яті всі тринадцять
   тисяч. Звідси й обмеження на дизайн рядка: він не може «розтягуватися під
   вміст», довгі значення обрізаються (пріоритет стиснення — текст деградує).

   Прокрутка — сторінкою, а не всередині коробки. Список у власному
   скрол-контейнері на телефоні означає два скроли один в одному, і палець
   щоразу вгадує, який із них зачепить.
   -------------------------------------------------------------------------- */

.hh-vlist { position: relative; }
.hh-vlist__win { position: absolute; left: 0; right: 0; top: 0; }
.hh-vlist__row {
  height: var(--vrow);
  box-sizing: border-box;
  border-bottom: var(--border-w) solid var(--border-faint);
  overflow: hidden;
}
/* Рядок фіксованої висоти не має права перенести текст: перенесений рядок
   виїде за свою межу й наїде на сусідній. Тому тут обидва рядки в одну
   лінію з багатокрапкою — це той самий пріоритет стиснення, тільки
   застосований жорсткіше, бо висота задана згори. */
.hh-vlist__row .hh-list__title,
.hh-vlist__row .hh-list__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root { --vrow: 72px; }
@media (min-width: 768px) { :root { --vrow: 60px; } }

/* Лічильник над списком.

   Головний елемент цього екрана, хоч і найменший. Власник дивиться на число
   й ухвалює рішення — тому воно не має права бути приблизним, а коли воно
   приблизне, це має бути видно в самому числі, а не у виносці. */
.hh-count {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2) 0 var(--sp-3);
}
.hh-count__n {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.hh-count__what { color: var(--text-muted); font-size: var(--size-small); }
.hh-count__warn { color: var(--warn); font-size: var(--size-small); }

/* Позначка «схоже, та сама людина». Не здогадка інтерфейсу: джерело саме
   тримає ознаку дубліката, і показувати її треба як факт із джерела, а не
   як припущення, інакше людина не знатиме, кому вірити. */
.hh-dup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--size-caption);
  color: var(--warn);
  white-space: nowrap;
}

/* Порожньо, бо джерело такого поля не має — і не матиме.

   Третій вигляд порожнечі поруч із «—» (значення справді немає) і чіпом
   «крок N» (домен ще не збудований). Три різні висновки: перше — факт про
   об'єкт, друге — робота, яку хтось має зробити, третє — час. Показані
   однаково, вони дають однакову помилку з обох боків: або людина роками
   дивиться на поле, якого ніхто не заповнить, або поле визнають зайвим і
   викидають до того, як прийдуть дані, заради яких воно стояло. */
.hh-empty-src {
  color: var(--warn);
  border-bottom: 1px dashed var(--warn-border);
  cursor: help;
}

/* --------------------------------------------------------------------------
   СТАНИ СПРАВЖНІХ ДАНИХ

   У макеті дані з'являються миттєво і завжди правильні — і це в ньому
   найбільша неправда. Основний польовий сценарій (поганий зв'язок після
   концерту) складається рівно з протилежного: очікування, збоїв і даних,
   які вже застаріли.

   П'ять станів нижче — не повідомлення поверх готового екрана. Вони міняють
   розкладку, тому їх треба закласти до переходу на API, а не після: інакше
   доведеться перемалювати кожен екран.

   Наскрізна вимога, важливіша за всі п'ять: НІЩО НЕ ГУБИТЬ ВВЕДЕНЕ. Якщо
   після будь-якого з цих станів людина мусить набирати заново — стан
   зроблений неправильно. На телефоні набір коштує найдорожче.
   -------------------------------------------------------------------------- */

/* 1. ЗАСТАРІЛІ ДАНІ.
   Показане, але вже не актуальне. У макета такого стану немає взагалі, а в
   поганому зв'язку він основний: людина дивиться на цифри, не знаючи, що
   вони отримані двадцять хвилин тому. Смуга, а не тост: стан триває. */
.hh-stale {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  background: var(--warn-quiet);
  color: var(--warn);
  border-bottom: var(--border-w) solid var(--warn-border);
  font-size: var(--size-caption);
}
.hh-stale__when { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-stale button {
  border: 0; background: transparent; color: inherit;
  font: inherit; text-decoration: underline; cursor: pointer; padding: 0;
}

/* 2. ЧЕРНЕТКА, ЩО ПЕРЕЖИЛА ЗБІЙ.
   Позначка над формою, у яку повернули введене. Без неї людина не знає, чи
   це її текст, чи система підставила старе. */
.hh-draft {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: var(--border-w) dashed var(--ok-border);
  border-radius: var(--radius);
  background: var(--ok-quiet);
  color: var(--text);
  font-size: var(--size-small);
  margin-bottom: var(--sp-4);
}
/* "Очистити" усередині банера чернетки (форма замовлення, Роман 24.08.2026):
   скидає localStorage-чернетку й повертає форму до чистого стану. Текстова
   кнопка, не hh-btn — це другорядна дія всередині повідомлення, не окремий
   елемент керування форми. */
.hh-draft__clear {
  border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: 600; text-decoration: underline;
  cursor: pointer; padding: 0; white-space: nowrap;
}

/* 3. ДВІ ВЕРСІЇ ПОРУЧ — конфлікт паралельної зміни.
   Інтерфейс не вирішує, хто правий: він показує, що сталося, і дає обрати.
   Автоматичне злиття тут гірше за будь-який ручний вибір, бо мовчазне. */
.hh-versions { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .hh-versions { grid-template-columns: 1fr 1fr; } }

.hh-version {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: var(--surface-sunken);
}
.hh-version--mine { border-color: var(--accent); }
.hh-version__who {
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.hh-version__diff { color: var(--warn); }

/* Тільки для екранного читача — підпис, який не малюємо, але який має бути. */
.hh-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   ПРИПУЩЕННЯ ЗАЛИВУ: показати те, що система вгадала за людину

   Повне обґрунтування — в assumptions.js. Головне рішення одним рядком:
   ПОЗНАЧАЄМО МЕНШІСТЬ, А НЕ БІЛЬШІСТЬ. Позначка інформативна рівно тоді,
   коли рідкісна; підсвітити 15 218 рядків — те саме, що не підсвітити
   жодного, тільки дорожче для очей.

   Чому тон info, а не warn. Припущення — не помилка: помилку виправляють,
   припущення підтверджують, і воно може виявитись правильним. Тривожний
   колір на більшості записів перестає бути тривожним за тиждень і забирає
   з собою довіру до всіх інших тривожних кольорів у системі.
   -------------------------------------------------------------------------- */

.hh-assumebar {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--info-quiet);
  border: var(--border-w) solid var(--info-border);
  border-radius: var(--radius-md);
}
.hh-assumebar__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh-assumebar__title { font-weight: var(--weight-medium); color: var(--info); }

/* Коли припущень меншість, смуга перестає бути головним на екрані: тепер
   головне — позначені рядки, а вона лише лічильник. */
.hh-assumebar--quiet {
  background: transparent;
  border-color: var(--border-faint);
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-3);
}
.hh-assumebar--quiet .hh-assumebar__title { color: var(--text-muted); font-weight: var(--weight-regular); }

/* Позначка на значенні — ПІДПИС ПОХОДЖЕННЯ, а не значок.
   «Канал: Instagram» і «Канал: Instagram · з назви договору» відрізняються
   тим, що друге можна перевірити. Значок повідомляє, що щось не так; підпис
   каже, що саме — і на цьому людина може діяти. */
.hh-assumed {
  border-bottom: 1px dotted var(--text-faint);
}
.hh-assumed__origin {
  display: block;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-faint);
}
/* У щільному рядку таблиці походження йде поруч, а не другим рядком: там
   висота рядка — умова того, що список узагалі можна читати. */
.hh-table .hh-assumed__origin,
.hh-list__meta .hh-assumed__origin { display: inline; margin-left: 6px; }

/* Зразок кольору в рядку пошуку товару (екран замовлення). Той самий прийом,
   що на вітрині каталогу, але власна копія: файл замовлення не залежить від
   файлу каталогу, як і решта екранів не залежать один від одного. */
.hh-order-swatch {
  width: 20px; height: 20px; flex: none;
  border-radius: var(--radius-full);
  border: var(--border-w) solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Вітрина каталогу: перегляд, у якому товар видно, а не прочитано

   ЧОМУ ЦЕ НЕ «КРАСИВІШИЙ СПИСОК»
   Каталог — єдиний розділ CORE, де людина працює з РЕЧАМИ, а не з
   документами. У списку рядків «Худі Преміум» і «Zip-худі long» — два майже
   однакові рядки тексту; на вітрині це дві різні речі, і різницю видно, не
   читаючи. Тому перегляд тут не оформлення, а спосіб упізнавання.

   ДВА РЕЖИМИ, І ОБИДВА ПОТРІБНІ
   Вітрина відповідає на «що це», список — на «скільки, за скільки, чи
   зіставлено». Один режим замість двох завжди обслуговує лише одне з двох
   питань, і друге стає незручним назавжди.

   ЩО ЦЕЙ КОМПОНЕНТ НЕ МАЄ ПРАВА ЗРОБИТИ — НАМАЛЮВАТИ ТРЕТІЙ РІВЕНЬ
   На справжніх вітринах картка = товар у кольорі: «Худі, молочний» і «Худі,
   графіт» — дві плитки. У нас колір — ознака ВАРІАНТА, а не рівень над ним
   (CLAUDE.md §3). Плитка тут завжди дорівнює `products`, а кольори показані
   зразками ВСЕРЕДИНІ плитки. Розкласти їх на окремі плитки означало б
   намалювати рівень, якого в моделі немає, — і перший же екран залишків
   успадкував би цю неправду.
   -------------------------------------------------------------------------- */

.hh-tiles {
  display: grid;
  gap: var(--sp-4);
  /* 150px — щоб на 375px стали дві колонки. Одна колонка на телефоні
     перетворює вітрину на стрічку, по якій до дев'ятого товару доїжджають
     хіба з наміром; дві дають перегляд оком. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 768px) {
  .hh-tiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

.hh-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
}
.hh-tile:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 3px; }
.hh-tile:hover .hh-shot { border-color: var(--border-strong); }

.hh-tile__name {
  /* Montserrat: це назва з бази. Фірмовий шрифт тут — найлегша й найгірша
     правка: капсом «Zip-худі long молочний (MX)» перестає читатись. */
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-medium);
}
.hh-tile__meta { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.hh-tile__price { font-size: var(--size-small); }
.hh-tile__flags { display: flex; flex-wrap: wrap; gap: 4px; }

/* --- Знімок товару --------------------------------------------------------
   Одна коробка на всі стани: є фото, фото їде, фото немає. Пропорція стала
   (4:5, як у вітринах одягу), бо різна висота плиток перетворює сітку на
   кладку, і око перестає порівнювати речі між собою.

   ВАЖЛИВЕ ПРО ПОРОЖНІЙ СТАН. Фото немає в БІЛЬШОСТІ позицій з 1С, і це
   надовго. Тому «без фото» тут не сіра діра, а спокійний контур: вітрина
   має лишатись читабельною на наборі, де половина плиток порожня, інакше
   нею просто не користуватимуться до кінця заливу фотографій. */
.hh-shot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border-faint);
  background: var(--surface-sunken);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.hh-shot svg, .hh-shot img { width: 78%; height: 78%; object-fit: contain; display: block; }
.hh-shot--empty svg { width: 56%; height: 56%; opacity: 0.5; }
.hh-shot__note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px var(--sp-2);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-faint);
  text-align: center;
}
.hh-shot--xs { width: 44px; aspect-ratio: 4 / 5; flex: none; border-radius: var(--radius-sm); }
.hh-shot--xs svg { width: 84%; height: 84%; }

/* --- Зразки кольору -------------------------------------------------------
   Це ПІДСУМОК варіантів, а не вибір. Клік по зразку нікуди не веде свідомо:
   сторінки кольору не існує, бо не існує рівня «колір». Уся група разом —
   одна кнопка, що відкриває таблицю варіантів.

   РОЗМІР +20% (терміново, Роман 25.08.2026, живий фідбек проти реальних
   фото меланжевого трикотажу — «піктограми мають бути об'ємніші, більші»):
   14px → 17px, той самий крок, що .hh-swatch-sm нижче — обидва рівня
   14px мали лишитись однаковими між собою заради візуальної консистентності
   каталогу, тому підняті РАЗОМ, не якийсь один. */
.hh-swatches { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hh-swatch {
  width: 17px; height: 17px; flex: none;
  border-radius: var(--radius-full);
  border: var(--border-w) solid rgba(0, 0, 0, 0.35);
  box-shadow: var(--hh-swatch-volume);
}
/* Style-плитка (issue #279): колір товару ще не розпізнано автопідказкою —
   порожній пунктирний кружечок, не вигаданий сірий заповнений (той факт,
   що колір НЕВІДОМИЙ, а не «сірий», має лишатись видимим оком). */
.hh-swatch--unknown { background: transparent; border-style: dashed; }

/* --- Піктограми вибору кольору (issue #309) ---------------------------------
   НЕ <select> — Роман: «маленькі квадратні кольорові піктограми (як фізичні
   зразки тканини), клік на піктограму обирає колір». Квадратна форма
   навмисно відрізняється від круглого .hh-swatch вище: той — ПІДСУМОК
   (не клікабельний, сторінки кольору немає), цей — САМ ВИБІР, і форма мала
   різнитись оком, а не лише курсором на hover. */
/* Підпис стрічки «Моно»/«Меланж» (терміново, Роман 25.08.2026) — та сама
   роль, що hh-label__optional поруч: приглушений, дрібний, не сплутати із
   заголовком поля «Колір». Друга й наступні стрічки отримують відступ
   зверху, перша — ні (margin-top скасовується сусіднім .hh-color-current). */
.hh-swatch-row__label {
  margin: var(--sp-3) 0 0; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em;
}
.hh-swatch-row__label:first-of-type { margin-top: 4px; }
.hh-swatch-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 4px; }
/* Розмір +30% (терміново, Роман 25.08.2026, той самий фідбек, що вище):
   28px → 36px. Найбільший крок із трьох піктограм навмисно — це вже сам
   ВИБІР (клік обирає колір), а не показ, і саме тут об'ємна фактура
   тканини (.hh-swatch-volume нижче) читається найкраще. */
.hh-swatch-pick {
  width: 36px; height: 36px; flex: none; padding: 0;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid rgba(0, 0, 0, 0.35);
  box-shadow: var(--hh-swatch-volume);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hh-swatch-pick:hover { transform: scale(1.08); }
.hh-swatch-pick:disabled { cursor: default; opacity: 0.6; }
/* Обраний зразок ледь помітний (issue #466, скріншот Романа): тонка світла
   рамка на темному тлі губилась поруч із десятком інших квадратиків, і
   галочка всередині — єдиний надійний сигнал — читалась тільки зблизька.
   Товща рамка (2px → 3px) акцентним кольором бренду + зовнішній glow
   (color-mix — той самий прийом, що .hh-link/.hh-input-group у файлі, без
   потреби заводити окрему --accent-rgb змінну) дають миттєвий "це обрано"
   ще до того, як око знайде саму галочку. */
.hh-swatch-pick--selected {
  border-color: var(--accent);
  border-width: 3px;
  box-shadow:
    var(--hh-swatch-volume),
    0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 8px 1px color-mix(in srgb, var(--accent) 70%, transparent);
}
.hh-swatch-pick__check {
  color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  font-size: 14px; line-height: 1;
}

/* «Без кольору» (issue #472) — перекреслений квадрат замість зразка
   тканини: діагональ .hh-danger під 45° поверх нейтрального фону
   .hh-swatch--unknown вище (той самий пунктирний "невідомо" за формою
   рамки, тут суцільна, бо стан ВІДОМИЙ — «свідомо немає кольору», не
   «колір ще не розпізнано»). Виключено з правила текстури плетіння
   (.hh-swatch-pick:not(.hh-swatch--unknown) нижче за файлом) через сам
   клас --unknown на елементі — квадрат лишається чистим, без фактури
   тканини, якої тут навмисно немає. */
.hh-swatch-pick--none {
  background-color: var(--surface-sunken);
  background-image: linear-gradient(
    45deg,
    transparent calc(50% - 1.2px), var(--danger) calc(50% - 1.2px),
    var(--danger) calc(50% + 1.2px), transparent calc(50% + 1.2px)
  );
}

/* Назва поточного кольору НАД палітрою (issue #309, живий фідбек Романа
   24.08.2026) — той самий hh-hint-масштаб тексту, окремим рядком, щоб не
   зливатись із заголовком поля "Колір" над нею. */
.hh-color-current { margin-top: 2px; margin-bottom: 0; font-weight: 600; }

/* Некликабельна квадратна піктограма кольору в каталозі (вітрина/список) і
   на картці перегляду (issue #309, живий фідбек Романа 24.08.2026: «показувати
   колір-піктограму з тултіпом-назвою при наведенні»). Той самий квадрат, що
   .hh-swatch-pick вище, лише менший.

   Розмір +20% (терміново, Роман 25.08.2026): 14px → 17px, той самий крок,
   що .hh-swatch вище (докстрінг там пояснює, чому разом). */
.hh-swatch-sm {
  display: inline-block; vertical-align: middle;
  width: 17px; height: 17px; flex: none;
  border-radius: 3px; margin-right: 6px;
  border: var(--border-w) solid rgba(0, 0, 0, 0.35);
  box-shadow: var(--hh-swatch-volume);
}

/* Клікабельний варіант .hh-swatch-sm (issue coordinator, 25.08.2026) —
   попап швидкої зміни кольору просто з картки товару (colorQuickEditPopup,
   screen-products.js). Курсор і легке підняття на hover — той самий
   візуальний натяк "це можна натиснути", що вже дає .hh-swatch-pick:hover
   вище, лише скромніший (тут це другорядна дія на картці, не головний
   вибір форми). Роль/tabindex свідомо НЕ додані: у каталозі ця піктограма
   лежить УСЕРЕДИНІ `<button data-open>` (tile()/listRow()) — вкладений
   фокусований/tabindex-елемент усередині <button> порушує модель вмісту
   HTML5, а два різні рівні доступності залежно від місця виклику (картка
   перегляду — не всередині button, каталог — всередині) гірші за один
   послідовний рівень скрізь. Клік мишею/дотиком лишається основним шляхом,
   як і решта швидких дій каталогу (перетягування Style-групи, наприклад,
   теж без клавіатурного дублера). */
.hh-swatch-sm--pickable { cursor: pointer; }
.hh-swatch-sm--pickable:hover { transform: scale(1.15); }

/* Картка перегляду товару (issue #470, Роман, скріншот): піктограма поруч
   із чіпом «Style: ... (N)» була того самого дрібного розміру, що в
   каталозі (17px) — на екрані це виглядало невіразно поруч із чіпами.
   .hh-swatch-sm--lg піднімає її РІВНО до розміру піктограм у попапі
   швидкої зміни кольору (colorQuickEditPopup, .hh-swatch-pick — 36px),
   бо це той самий попап, що відкривається кліком по цій піктограмі: розмір
   мав би відповідати тому, що людина побачить за секунду. Каталог
   (tile()/listRow()) свідомо НЕ зачеплений — там 17px лишається щільним
   рядом іконок серед десятків товарів, збільшення там ламало б рядки. */
.hh-swatch-sm--lg { width: 36px; height: 36px; }

/* Порожній стан кольору на картці перегляду (Роман, 16.09.2026,
   productColorEmptyControl у screen-products.js): товар без кольору
   показує на місці піктограми пунктирну плашку «+ колір», що відкриває ту
   саму палітру. Тієї ж висоти, що піктограма (36px — зручна ціль для
   пальця), але ширша — підпис видимий текстом, бо на телефоні title не
   показується. Без об'єму й заливки: пунктир читається як «тут ще нічого
   немає», а не як сірий колір. */
.hh-swatch-sm--empty {
  width: auto; min-width: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-2);
  border: var(--border-w) dashed var(--border-strong);
  background: transparent; box-shadow: none;
  font-size: var(--size-caption); line-height: 1; white-space: nowrap;
  color: var(--text-muted);
}
.hh-swatch-sm--empty:hover { transform: none; border-color: var(--text-muted); color: var(--text); }

/* --- ОБ'ЄМ: тканина, не плаский чіп кольору (терміново, Роман 25.08.2026,
   живий фідбек проти реальних фото — «піктограми мають нагадувати
   тканину») -------------------------------------------------------------
   Одна змінна для всіх трьох розмірів піктограм: м'який внутрішній
   highlight зверху-зліва (ніби світло падає на клаптик пряжі) + легка тінь
   знизу-справа, поверх уже наявного тонкого internal rim (той самий
   білястий контур, що був і раніше, — inset 0 0 0 1px). Суто box-shadow,
   НЕ background-image: фон піктограми задає inline `background`
   (swatchBackground()), а меланж-текстура нижче — окремий шар ::after;
   об'єм у тому ж полі плутав би два різні шари. Ефект тонкий
   навмисно (низька альфа) — Роман попереджав не перестаратись: це має
   лишитись швидко зчитуваним кольором, не мініатюрною ілюстрацією. */
:root {
  --hh-swatch-volume:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 1px 1px 1.5px rgba(255, 255, 255, 0.4),
    inset -1px -1px 1.5px rgba(0, 0, 0, 0.28);
}

/* --- ФАКТУРА ПЛЕТІННЯ для звичайних (не меланжевих) кольорів ---------------
   Найтонший діагональний repeating-linear-gradient, той самий трюк, що
   меланж нижче, лише один шар і на порядок нижча непрозорість — це фон під
   ОДНОРІДНИЙ колір, не заміна кольору текстурою. Кут (100deg — трохи
   нахилений від строго вертикального 90deg) навмисно той самий, що в
   меланжевих шарах нижче: обидва мають читатись як "той самий матеріал",
   різниця лише в кількості відтінку. Період у px (не %) — та сама причина,
   що в меланжу: абсолютна товщина "нитки" не залежить від розміру
   піктограми, тому одне правило годиться і для 17px, і для 36px.
   Меланж нижче сюди не втручається: його фактура — окремий шар ::after. */
.hh-swatch:not(.hh-swatch--unknown),
.hh-swatch-sm:not(.hh-swatch--unknown),
.hh-swatch-pick:not(.hh-swatch--unknown) {
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px,
    rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0.05) 2px,
    transparent 2px, transparent 3px
  );
}

/* Меланж — фактура трикотажу-меланжу (heathered jersey), Роман 29.09.2026,
   фото зразка: дрібні ГОРИЗОНТАЛЬНІ світлі й темні волокнисті штрихи
   поверх основного кольору. Замінює попередні майже вертикальні смуги
   (100/97/103deg, 25.08.2026 / issue #466).

   ЧОМУ ::after, А НЕ background-image НА САМОМУ ЕЛЕМЕНТІ. Попередня
   текстура жила в background-image класу, а колір — в inline
   `style="background:…"` (swatchBackground(), screen-products.js).
   `background` — шорткат: він скидає й background-image, а inline-стиль
   сильніший за клас. Тож текстура в браузері не малювалась узагалі —
   меланж виглядав суцільним кольором, про що й скаржився Роман. Окремий
   шар-псевдоелемент лягає поверх БУДЬ-ЯКОГО фону (суцільний hex чи
   двоколірний split hex/hex2), не змагаючись з inline-стилем і без
   !important.

   Сама фактура — два шари шуму feTurbulence (inline SVG як data-URI, без
   зовнішніх файлів): baseFrequency '0.06 0.85' — низька частота по
   горизонталі, висока по вертикалі, тобто шум розтягнутий у короткі
   горизонтальні волокна висотою ~1px і довжиною 8–20px. Один шар —
   світлі волокна (білий), другий — темні (чорний), різний seed, щоб
   вони не збігались. Поріг у feColorMatrix (alpha = 3.6·R − 2.0 для
   світлих, 2.6·R − 1.6 для темних) лишає видимими лише «гребені» шуму:
   окремі штрихи, а не суцільна димка. Темні волокна навмисно слабші:
   на рівних темний меланж на знімку виглядав помітно темнішим за свій
   hex, а мав читатись тим самим кольором.

   Тайл 64px із stitchTiles і розміром у px (не %): абсолютний масштаб
   волокна однаковий на 12px крапці дерева каталогу, 17px піктограмі
   каталогу й 36px у палітрі, та сама причина, що період у px для
   фактури плетіння вище. Під темами не змінюється: це колір тканини, не
   інтерфейсу — фон сторінки на нього не впливає.

   Меланж розпізнається за словом «меланж» у colors.name (рішення
   25.08.2026, підтверджене 30.09.2026: окремого поля немає); класи нижче
   ставлять isMelangeName() у screen-products.js, catalog-tree і чіп
   комплекту в screen-collections.js. */
:root {
  --hh-melange-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 0.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.6 0 0 0 -2.0'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 0.85' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23l)'/%3E%3Crect width='64' height='64' filter='url(%23d)'/%3E%3C/svg%3E");
}
.hh-swatch--melange,
.hh-swatch-sm--melange,
.hh-swatch-pick--melange,
.hh-swatch-dot--melange {
  position: relative;
  overflow: hidden;
}
.hh-swatch--melange::after,
.hh-swatch-sm--melange::after,
.hh-swatch-pick--melange::after,
.hh-swatch-dot--melange::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--hh-melange-texture);
  background-size: 64px 64px;
}
/* Галочка обраного зразка — над фактурою, а не під нею. */
.hh-swatch-pick--melange .hh-swatch-pick__check { position: relative; z-index: 1; }

/* --- Полотно каталогу: Style-групування (issue #279) -----------------------
   Об'єднана плитка виглядає як звичайна (hh-tile), але сама не є <button>
   (клік розгортає, не веде нікуди — сторінки Style немає, той самий
   принцип, що зразок кольору вище) — тому фокус/курсор/рамка стилізуються
   тут окремо, того самого вигляду, що .hh-tile. */
.hh-tile--group { position: relative; }
.hh-tile__group-head {
  display: flex; flex-direction: column; gap: var(--sp-2);
  cursor: pointer;
}
.hh-tile__group-head:hover .hh-shot { border-color: var(--border-strong); }
.hh-tile--selected .hh-shot,
.hh-tile[draggable="true"]:active .hh-shot { border-color: var(--accent); }
.hh-canvas-drag-over > .hh-shot,
.hh-canvas-drag-over .hh-tile__group-head > .hh-shot,
.hh-canvas-drag-over > .hh-tile__stack .hh-shot { border-color: var(--accent); border-style: dashed; }

/* «Колода карт» (issue #279, живий фідбек Романа 24.08: інлайн-розгортання
   списку кольорів під тайлом роздувало висоту й ламало сітку — замінено на
   стос фото, перше коло). .hh-tile__stack сидить на місці одиночного
   .hh-shot (той самий 4:5 бокс — розмір коробки задає main-слот у
   normal flow), «карти» позаду — position:absolute/inset:0, нижчий
   z-index, pointer-events:none (клік по стосу — той самий клік по всій
   шапці плитки, data-group-toggle, окремої цілі в картках немає).

   ТРЕТЄ КОЛО фідбеку (координатор передав, потім Роман уточнив і
   скасував проміжну версію з діагональним віялом — структуру/розташування
   карток лишаємо як у другому колі, offset/z-index/pointer-events не
   переробляються):

     1. Усі картки — ОДНАКОВОГО зменшеного розміру (не «верхня велика —
        решта маленькі», не навпаки): один і той самий `scale(0.8)` на
        `.hh-tile__stack-main` і на `.hh-tile__stack-behind` — друге коло
        робило їх різними розмірами саме тому Роман і забракував вигляд
        («лише перше фото менше за інші»).
     2. Рамка кожної картки — колір товару, не нейтральна сіра
        (`colorStackBorder()` у screen-products.js, той самий довідник
        colorsDict/colorHex(), що вже фарбує квадратик-свотч на тайлі) — inline
        `border` на .hh-tile__stack-main/-behind, тому власна рамка
        вкладеного .hh-shot тут прибрана (нижче), інакше вийшла б подвійна
        лінія навколо однієї картки. */
.hh-tile__stack { position: relative; }
.hh-tile__stack-main {
  position: relative; z-index: 3;
  transform: scale(0.8);
}
.hh-tile__stack-behind {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  transform: scale(0.8) translate(9px, 9px) rotate(4deg);
}
.hh-tile__stack-main .hh-shot,
.hh-tile__stack-behind .hh-shot { background: var(--surface-sunken); border: none; }
.hh-tile__stack-behind--1 { z-index: 2; transform: scale(0.8) translate(8px, -8px) rotate(-3deg); }
.hh-tile__stack-behind--2 { z-index: 1; transform: scale(0.8) translate(13px, 12px) rotate(5deg); }

/* --- Ярлички на фото товару: наявність (issue #564), «Web» (issue #565) і
   стать (issue #563) ---------------------------------------------------
   product-badges.js (design/) — спільний рендер для ВСІХ плиток товару
   (issue #566). `.hh-shot`/`.hh-tile__stack-main` уже `position:relative`
   (вище), тому стос ярличків — прямий дитина цих контейнерів, absolute в
   куті, без зміни висоти/ширини самого фото. `pointer-events:none` на
   контейнері — стос не має перехоплювати клік по плитці/фото, лише
   :hover для нативного `title` лишається на кожному ярличку окремо (він
   спрацьовує і без pointer-events на контейнері, бо курсор фізично над
   елементом; сам контейнер лишається неклікабельним).

   Issue #577 (Роман, живий фідбек): «всі ярлички мають бути в стопчик один
   під одним справа внизу фото» — раніше наявність сиділа зліва вгорі
   (`--tl`), Web справа вгорі (`--tr`), а стать була ОКРЕМИМ підписом-чипом
   ПІД фото (screen-collections.js, canvasCard()) — три різних місця для
   трьох фактів однієї плитки. Тепер ОДИН контейнер `.hh-photo-badges--br`
   у правому нижньому куті (порядок дітей — наявність → Web → стать → ціна,
   задає product-badges.js:hhProductBadgesOverlayHtml(), докстрінг там
   пояснює чому саме так).

   РЯДОК, А НЕ СТОВПЧИК (Роман, живий фідбек 23.09.2026 над скріншотом
   проду: п'ять ярличків у вузькій колонці — наявність, комісія, Web,
   стать, ціна — не влазили по висоті малої плитки каталогу й «розкидані у
   два стовпчики праворуч/знизу — хаотично»; додана ціна 12.09.2026 стала
   п'ятим елементом стосу, і саме тоді висота колонки перестала влазити).
   Це скасовує напрямок issue #577 (стовпчик), лишаючи те саме рішення —
   ОДИН спільний контейнер у правому нижньому куті, замість трьох розкиданих
   кутків: `flex-wrap: wrap` + `justify-content: flex-end` замість
   `flex-direction: column` — ярлички течуть праворуч-наліво й переносяться
   рядком, а не стовпчиком, обмежені шириною фото (`max-width: 100%`). */
.hh-photo-badges {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  pointer-events: none;
}
.hh-photo-badges--br { right: 4px; bottom: 4px; left: 4px; }

/* Бірка лого партнера колаборації (docs/instructions/instruction-partner-
   collab-logo-web.md, product-badges.js:hhPartnerLogoBadgeHtml) — правий
   ВЕРХНІЙ кут фото, протилежний від стосу `.hh-photo-badges--br` вище: два
   різних оверлеї на одній плитці не мають накладатись одне на одного.
   Навмисно НЕ варіант `.hh-photo-badges` (той клас — flex-контейнер для
   ЧИПІВ із фоном/рамкою, докстрінг вище) — тут сирий `<img>` без жодного
   чипа/фону (Роман, ТЗ: «сам PNG, без фону/чипу»), тому власний клас. */
.hh-partner-logo-badge {
  position: absolute;
  z-index: 4;
  top: 4px;
  right: 4px;
  max-width: 40%;
  max-height: 28px;
  object-fit: contain;
  pointer-events: none;
}
.hh-photo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border: var(--border-w) solid transparent;
  pointer-events: auto; /* сам ярличок ловить hover заради title-підказки */
}
.hh-badge-stock--out  { background: var(--danger-quiet); color: var(--danger); border-color: var(--danger-border); }
.hh-badge-stock--low  { background: var(--warn-quiet);   color: var(--warn);   border-color: var(--warn-border); }
.hh-badge-stock--mid,
.hh-badge-stock--high,
.hh-badge-stock--top  { background: var(--ok-quiet);     color: var(--ok);     border-color: var(--ok-border); }
.hh-badge-web {
  background: var(--info-quiet);
  color: var(--info);
  border-color: var(--info-border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Клікабельний варіант (доручення власника, координатор 23.09.2026) —
   той самий рецепт наведення, що .hh-swatch-sm--pickable вище: легке
   збільшення на hover підказує клікабельність без зайвої рамки/тіні на
   маленькій плитці каталогу. */
.hh-badge-web--clickable { cursor: pointer; }
.hh-badge-web--clickable:hover { transform: scale(1.08); }
/* Послуга (product-badges.js:hhServiceBadgeHtml) — на місці бірки
   наявності: кількість не облікується, тож тон нейтральний, не зелений і
   не червоний (це не рівень наявності). */
.hh-badge-service {
  background: var(--accent-quiet);
  color: var(--accent);
  border-color: var(--border);
  font-size: 10px;
}
.hh-badge-gender {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border-color: var(--border);
  font-size: 10px;
}
/* Комісія ДО нас — чужий товар на нашій полиці (CLAUDE.md §2). Навмисно
   НЕ зелений і не червоний: це не рівень наявності, і фарбувати його
   мовою наявності означало б натякнути, що товар «є» в тому ж сенсі, що
   й наш. Приглушений акцентний тон — «інша природа», не «добре/погано». */
.hh-badge-consignment {
  /* accent-quiet/accent — пара, визначена в обох темах (tokens.css):
     світла #4a6479 на #e9eef3, темна #adbfd0 на #1c2630. Рамка бере
     загальний --border, бо окремого --accent-border у токенах немає, і
     вигадувати його заради одного ярличка не варто. */
  background: var(--accent-quiet);
  color: var(--accent);
  border-color: var(--border);
  font-size: 10px;
  max-width: 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;   /* заради ellipsis: flex-контейнер його не робить */
  line-height: 18px;
}
/* Актуальна ціна до продажу (issue #577 продовження, Роман 12.09.2026:
   «додаткова бірка... з ціною... під біркою статі») — ОСТАННІЙ ярличок у
   стосі, найближче до кута фото (docstring hhPriceBadgeHtml,
   product-badges.js). Той самий приглушений нейтральний тон, що стать
   (--surface-sunken/--text-muted): ціна тут — довідкова інформація для
   ока, не сигнал «добре/погано», як наявність, і не інша природа даних,
   як комісія. */
.hh-badge-price {
  background: var(--surface-sunken);
  color: var(--text);
  border-color: var(--border);
  font-size: 10px;
  font-weight: 700;
}

/* --- Попап складу Style: «міні-вітрина» (issue #279, живий фідбек Романа
   24.08, третє коло) --------------------------------------------------------
   Заміняє попередній плоский список (`.hh-tile__group-members`/
   `.hh-tile__group-member`, прибрано — жодних посилань на ці класи не
   лишилось у screen-products.js): Роман хотів «усі позиції як вітрина» —
   попап тепер малює звичайні tile()-картки каталогу в сітці, лише дрібніші.

   .hh-modal--wide — цьому попапу замало стандартних 520px `.hh-modal`
   (mergeConfirmModal лишається на них — то форма, не сітка): групи по
   20+ товарів («Футболка classic, premium» — 24) мають вміщати кілька
   карток у ряд, інакше сітка виродилась би в один стовпець і попап став
   би довшим списком під іншою назвою. */
.hh-modal--wide { max-width: min(1100px, 92vw); }

/* --- Мовні закладки форми публікації товару (доручення власника,
   координатор 23.09.2026, §2б/§2в задачі, стиль виправлено 23.09.2026 —
   живий фідбек власника на PR #2787: «має бути звичайною закладкою, а не
   пігулкою-чіпом») — uk (база, редагована) + en/pl/de (переклад,
   перегляд), design/screen-products.js: pubLocaleTabsHtml()/
   pubLocaleTabPanelHtml(). Розмітка тепер несе СПІЛЬНИЙ компонент вкладок
   .hh-tabs/.hh-tab (розділ 12 вище в цьому файлі) — той самий, що вже
   renderTabNav() (screen-collections.js) і вкладки screen-orders.js:
   спільна нижня лінія й підкреслення активної закладки — стандартна
   поведінка .hh-tab[aria-selected="true"], другий набір кольору/рамки тут
   більше не пишемо. .hh-pub-locale-tabs лишається лише як модифікатор
   відступу зверху (margin-top) поверх .hh-tabs — конкретних кольорів
   закладки в цьому файлі більше нема. Індикатор заповненості (dot) —
   єдине, що й далі специфічне для цього місця (палітра нижче). */
.hh-pub-locale-tabs { margin-top: var(--sp-3); }
/* Індикатор заповненості (зелена/жовта/червона) — той самий формат, що
   `--ok`/`--warn`/`--danger` токени решти чипів файлу, не нові кольори. */
.hh-pub-locale-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  color: #fff;
}
.hh-pub-locale-dot--full    { background: var(--ok); }
.hh-pub-locale-dot--partial { background: var(--warn); }
.hh-pub-locale-dot--empty   { background: var(--danger); }
.hh-pub-locale-panel { margin-top: var(--sp-2); }

/* --- Екран «Забезпечення» (instruction-order-fulfillment.md, issue #960,
   мокап `mockup-order-fulfillment.html`) -------------------------------
   Ці класи раніше не існували взагалі — design/screen-order-fulfillment.js
   малював їх у розмітці, компонент функціонував (запити, автозаповнення,
   commit), але без жодного власного стилю: картки локацій виглядали
   голими полями вводу без сітки/підсвітки. Тут — саме той словник
   токенів, що вже інші модалки (--ok/--warn/--danger, --surface*,
   --border*, --sp-*), не окрема кольорова схема мокапу. */

.hh-fulfil-meta {
  font-size: var(--size-small); color: var(--text-muted); margin: var(--sp-1) 0 0;
  display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center;
}
.hh-fulfil-meta__sep { color: var(--text-faint); }

.hh-fulfil-chain {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken);
  border-bottom: var(--border-w) solid var(--border-faint);
  font-size: var(--size-small); color: var(--text-muted);
}
.hh-fulfil-chain__label { font-weight: 600; color: var(--text); }
.hh-fulfil-chain__arr { color: var(--text-faint); }
.hh-fulfil-step { display: inline-flex; align-items: center; gap: var(--sp-1); }
.hh-fulfil-step__n {
  width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--surface-brand);
  color: var(--text-on-brand); font-size: 9.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.hh-fulfil-step__alt {
  border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
  padding: 2px var(--sp-2); background: var(--surface); color: var(--text);
}
.hh-fulfil-step__or { color: var(--text-faint); font-size: var(--size-caption); }

.hh-fulfil-cards { display: flex; flex-direction: column; }
.hh-fulfil-card { padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-w) solid var(--border-faint); }
.hh-fulfil-card:last-child { border-bottom: none; }
.hh-fulfil-card__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.hh-fulfil-card__name { font-size: var(--size-small); font-weight: 600; flex: 1 1 auto; min-width: 0; }
.hh-fulfil-card__need { font-size: var(--size-small); color: var(--text-muted); white-space: nowrap; }
.hh-fulfil-card__need b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.hh-fulfil-card__locs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hh-fulfil-loc {
  width: 118px; border: var(--border-w) solid var(--border); border-radius: var(--radius);
  padding: var(--sp-2); background: var(--surface);
}
.hh-fulfil-loc--pick { border-color: var(--ok-border); background: var(--ok-quiet); }
.hh-fulfil-loc--zero { opacity: .55; }
.hh-fulfil-loc--drop { border-color: var(--warn-border); background: var(--warn-quiet); }
.hh-fulfil-loc__name {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-fulfil-loc--pick .hh-fulfil-loc__name { color: var(--ok); }
.hh-fulfil-loc--drop .hh-fulfil-loc__name { color: var(--warn); }
.hh-fulfil-loc__row { display: flex; align-items: center; gap: var(--sp-1); }
.hh-fulfil-loc__qty { width: 42px; text-align: center; padding-left: 0; padding-right: 0; }
.hh-fulfil-loc__free { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.hh-fulfil-loc__free b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.hh-fulfil-loc__free--zero b { color: var(--danger); }

.hh-fulfil-card__note {
  margin-top: var(--sp-2); font-size: var(--size-caption); border-left: 3px solid var(--border-strong);
  padding: var(--sp-1) var(--sp-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.hh-fulfil-card__note--warn { border-left-color: var(--warn); background: var(--warn-quiet); color: var(--warn); }
.hh-fulfil-card__note--ok { border-left-color: var(--ok); background: var(--ok-quiet); color: var(--ok); }

.hh-fulfil-choice { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.hh-fulfil-action { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hh-fulfil-action__label { font-size: var(--size-small); color: var(--danger); }

/* §8.3 — інлайн-панелі «Замовлення постачальнику» (селект, коли типового
   постачальника немає) і «Запропонувати заміну» (живий пошук + вибір
   SKU), обидві під рядком дій картки «Немає ніде». */
.hh-fulfil-inline {
  margin-top: var(--sp-2); padding: var(--sp-3); background: var(--surface-sunken);
  border: var(--border-w) solid var(--border-faint); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.hh-fulfil-inline__acts { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.hh-fulfil-replace__row {
  display: block; width: 100%; text-align: left; font-size: var(--size-small);
  padding: var(--sp-2); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: var(--sp-1); cursor: pointer;
}
.hh-fulfil-replace__row:last-child { margin-bottom: 0; }
.hh-fulfil-replace__row--on { border-color: var(--surface-brand); background: var(--surface-hover); }

.hh-fulfil-strategy, .hh-fulfil-opts {
  padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken); border-bottom: var(--border-w) solid var(--border-faint);
}
.hh-fulfil-strategy__h {
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
  color: var(--text-muted); margin: 0 0 var(--sp-2);
}
.hh-fulfil-opt, .hh-fulfil-cbx {
  display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--surface);
  margin-bottom: var(--sp-1); cursor: pointer;
}
.hh-fulfil-opt:last-child, .hh-fulfil-cbx:last-child { margin-bottom: 0; }
.hh-fulfil-opt--on, .hh-fulfil-cbx--on { border-color: var(--surface-brand); background: var(--surface-hover); }
.hh-fulfil-opt input[type="radio"], .hh-fulfil-cbx input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
.hh-fulfil-opt__t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh-fulfil-opt__t b { font-size: var(--size-small); font-weight: 600; }
.hh-fulfil-opt__t .hh-muted { font-size: var(--size-caption); line-height: 1.5; }
.hh-fulfil-strategy__target { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

.hh-fulfil-summary { font-size: var(--size-small); color: var(--text-muted); display: flex; flex-wrap: wrap; }
.hh-fulfil-summary b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hh-fulfil-summary > :not(:last-child)::after { content: "·"; margin: 0 var(--sp-2); color: var(--text-faint); }
.hh-modal__foot:has(.hh-fulfil-summary) { flex-wrap: wrap; }
.hh-fulfil-foot-acts { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .hh-fulfil-foot-acts { margin-left: 0; width: 100%; }
}

/* .hh-tiles--compact — той самий `.hh-tiles`, лише вужчі колонки: «-30%»
   Романа зроблено звуженням GRID-КОЛОНКИ (150/210px → 105/147px), а не
   `transform:scale()` на самій картці. Причина: tile() не має власної
   фіксованої ширини — її задає колонка grid; scale() лишив би старий,
   НЕзменшений layout-розмір коробки (сітка й далі рахувала б проміжки по
   повній ширині, картки виглядали б меншими, але з непропорційно
   великими дірками навколо) — простіший і надійніший шлях: зменшити межі
   самої колонки, tile() підлаштується сам, без жодного масштабування. */
.hh-tiles--compact { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
@media (min-width: 768px) {
  .hh-tiles--compact { grid-template-columns: repeat(auto-fill, minmax(147px, 1fr)); }
}

/* Кнопка «Вивести окремо» — маленька іконка в кутку картки (той самий
   рецепт, що unlinkBtn на тайлі медіа-галереї, issue #248): сиблінг
   tile() усередині .hh-tile__modal-item, не вкладена в неї (tile() сам —
   <button>, вкладати button у button не можна). */
.hh-tile__modal-item { position: relative; }
.hh-tile__modal-ungroup { position: absolute; top: 4px; right: 4px; z-index: 2; }

/* Чекбокс масового вибору (issue coordinator, 27.08.2026, друге коло —
   «дві кнопки нагорі, картки перетворюються на чекбокси», view.canvasGroupBulk
   докстрінг у screen-products.js): той самий кут, що .hh-tile__modal-ungroup,
   лише зліва — обидва контроли в масовому режимі не малюються одночасно
   (docstring groupMembersModal(): inBulk виключає ungroup), тож конфлікту
   немає, а симетричне розміщення читається одразу як «керування карткою».
   Непрозоре тло під чекбоксом — фото картки під ним буває світлим, а
   стандартний чекбокс без підкладки губиться на світлому знімку. */
.hh-tile__modal-select {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  background: var(--surface); border-radius: var(--radius-sm); padding: 2px;
  line-height: 0;
}

/* Рядок чипів поточних колекцій під карткою в режимі "collections" (вимога
   Романа, п.4: «під кожною карткою — поточні колекції з хрестиком»). Блок
   лежить нижче .hh-tile__modal-actions, той самий вузький шрифт компактної
   сітки. */
.hh-tile__modal-collections { margin-top: 4px; font-size: 0.82em; }
.hh-tile__modal-collections .hh-chip { font-size: inherit; }

/* Статус + колекції на кожній картці попапу «Склад Style» (issue
   coordinator, 27.08.2026) — вузький рядок під tile(), той самий рецепт
   компактності, що вже звузив саму сітку (.hh-tiles--compact вище):
   картка лишається 105-147px завширшки, тому чіп статусу отримує менший
   шрифт, а не переносить слово. flex-wrap на випадок довгого статусу на
   найвужчій колонці (105px, мобільний перегляд попапу). */
.hh-tile__modal-actions {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-top: 4px; font-size: 0.82em;
}
.hh-tile__modal-actions .hh-chip { font-size: inherit; }

/* «Колекції товару» тут спершу поїхало іконкою-олівцем без видимого тексту
   (title/aria-label — лише tooltip при наведенні), і Роман на скріншоті
   попапу не впізнав у ньому кнопку зміни колекції (issue #679: «де пікер
   масової зміни колекції?») — переплутав з іконкою редагування взагалі.
   Тепер той самий .hh-chip, що й статус поруч (візуально одна родина
   контролів), з видимим підписом «Колекції» — іконка лишається як
   візуальна підказка, але текст більше не ховається за наведенням миші. */
.hh-tile__modal-actions .hh-chip svg { width: 12px; height: 12px; flex: none; }

/* Порожнє місце полотна під час перетягування кольору «назовні» (розділ
   «Виведення товару зі Style назад») — з'являється, поки триває саме такий
   drag (JS додає/прибирає клас, канва сама по собі його не носить). */
.hh-tiles.hh-canvas-ungroup-hint::after {
  content: "Відпусти тут, щоб вивести окремою карткою";
  display: block;
  grid-column: 1 / -1;
  padding: var(--sp-3);
  text-align: center;
  border: var(--border-w) dashed var(--accent);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--size-caption);
}

/* --- Шапка картки товару --------------------------------------------------
   Акцент на фото, назві й описі; технічне лишається доступним, але нижче.
   Порядок тут — це відповідь на питання «що це за річ», а не «які в неї
   поля»: друге питання ставлять рідше, і воно чекає у вкладках. */
.hh-hero { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
@media (min-width: 768px) {
  .hh-hero { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}
/* На телефоні знімок 4:5 на всю ширину займає майже весь перший екран, і
   назва з ціною виявляються за згином. На вітрині магазину це правильно —
   там фото і є товар; тут людина прийшла працювати, і назва потрібна їй
   одразу. Тому висота знімка обмежена так, щоб під ним лишалось місце на
   назву й ціну, а пропорція тримається шириною. */
/* Обмежуємо ШИРИНУ, а не висоту: пропорція 4:5 рахується від ширини, тож
   max-height її просто зламав би, лишивши коробку розтягнутою. */
.hh-hero__media .hh-shot { max-width: calc(46vh * 4 / 5); margin-inline: auto; }
@media (min-width: 768px) {
  .hh-hero__media .hh-shot { max-width: none; }
}

.hh-hero__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.hh-hero__side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

/* Опис — єдине місце в системі з довгим людським текстом. Ширина обмежена
   не для краси: рядок довший за ~68 символів око губить при переході. */
.hh-prose { max-width: var(--prose-max); color: var(--text-muted); }
.hh-prose p { margin: 0 0 var(--sp-3); }
.hh-prose p:last-child { margin-bottom: 0; }
.hh-prose--lead { color: var(--text); font-size: var(--size-h3); line-height: var(--lh-h3); }

/* --------------------------------------------------------------------------
   СЛУЖБОВЕ НА ЕКРАНІ — ЗА ЗАМОВЧУВАННЯМ НЕВИДИМЕ

   Технічні підписи («поле → таблиця», «крок 5», коди помилок) робили велику
   роботу: без них екрани малювали б поля, яких немає в схемі. Але це
   записка для нас, а не частина продукту — і людина, яка вперше відкрила
   систему, читає їх як шум.

   Тому вони лишаються в розмітці, доступні одним параметром (?dev=1), і
   зникають із того, що бачить людина. Правило те саме, що для даних: на
   проді за замовчуванням правда, службове вмикається свідомо.

   ОЗНАКА, А НЕ ПЕРЕЛІК ІМЕН
   -------------------------
   Перша редакція перелічувала чотири класи. Це працює рівно доти, доки автор
   нового підпису пам'ятає дописати п'яте ім'я сюди — а забути це нічого не
   коштує й нічим не сигналить: підпис просто лишається видимим на проді.
   Перевірка це підтвердила одразу: два правдоподібні нові імені (`hh-note`,
   `d-trace`) було видно без прапорця.

   Тому головне тут — АТРИБУТ `data-service`. Він не залежить від оформлення
   (клас можна міняти скільки завгодно), його видно в розмітці без CSS, і
   новий підпис закривається, **не потрапивши в жоден перелік**. Це той самий
   перехід «з переліку на клас», який ми зробили для прав і для сторінок.

   Чотири класи лишаються нижче як сумісність із наявною розміткою, а не як
   механізм. Нове службове позначається атрибутом.

   ХОВАЄМО ЧЕРЕЗ `:not(.hh-dev)`, А НЕ ПАРОЮ ПРАВИЛ. Пара «сховати / у
   dev-режимі показати» вимагає назвати `display` для показу — а службове
   буває і абзацом, і чіпом (`inline-flex`), і підписом у комірці таблиці.
   Будь-яке одне значення там мовчки міняло б розкладку саме тоді, коли на
   неї дивляться. Через `:not` у режимі розробки правило не застосовується
   ВЗАГАЛІ, і елемент лишається таким, яким його намалював його ж компонент.

   Падає воно в закритий бік: класу `hh-dev` немає — усе службове сховане.
   Не виконався жоден скрипт — класу теж немає, тобто сховане.
   -------------------------------------------------------------------------- */
html:not(.hh-dev) [data-service],
html:not(.hh-dev) .d-note,
html:not(.hh-dev) .lg-trace,
html:not(.hh-dev) .g-trace,
html:not(.hh-dev) .hh-trace { display: none; }

/* --------------------------------------------------------------------------
   ЗАМОВЛЕННЯ — ШИРОКА ФОРМА

   Переробка за прямим брифом Романа (design-new-order-page.md): вузька
   колонка на всю висоту не давала бачити клієнта, товари й підсумок разом,
   а це якраз те, що менеджер має перевірити одним поглядом перед
   «Провести». .hh-form лишається вузьким скрізь (--form-max навмисно малий
   — довший рядок = більше промахів), тут — явний виняток одним модифікатором,
   а не переписаний загальний клас.
   -------------------------------------------------------------------------- */
.hh-form--order { max-width: none; }

/* Форма публікації товару (issue coordinator, 25.08.2026, скріншот Романа:
   «Фото для публікації» стиснуте у вузьку колонку) — той самий виняток, що
   `.hh-form--order` вище: `.hh-form` навмисно вузький скрізь, тут пікер фото
   й сітка розмірів мають розтягуватись на всю ширину картки товару, інакше
   мініатюри 72px стискаються в один стовпчик замість рядків. */
.hh-form--pub { max-width: none; }

/* Форма акту роялті (власник 03.10.2026, скріншот: «табличка надто вузька,
   не видно позиції, в які акти ввійшли») — той самий виняток: перелік
   документів за період із чіпом акту не вміщався в --form-max, назви
   обрізались трьома крапками. Поля періоду й юрособи лишаються короткими
   самі по собі, ширшає лише перелік. */
.hh-form--act { max-width: none; }

/* Діалог «Виняток за позицією» (817): історія продажів таблицею й рядок
   «дата початку · дата кінця · ставка» мають займати ширину модалки, а не
   --form-max; сама модалка — середня, не на пів екрана. */
.hh-form--royalty-exc { max-width: none; }
.hh-modal.hh-modal--royalty-exc { max-width: min(760px, 96vw); }
@media (max-width: 767px) {
  /* Телефон — нижній лист на всю ширину, як решта модалок. */
  .hh-modal.hh-modal--royalty-exc { max-width: none; }
}

/* Шапка — дві колонки: хто й звідки / куди й за скільки (Частина III
   брифу). На телефоні одна колонка згори вниз — порядок читання той самий,
   що людина набирає, слухаючи клієнта. */
.hh-order-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
}
@media (min-width: 900px) {
  .hh-order-head { grid-template-columns: 1fr 1fr; }
}
/* Мокап-order-page-v3 (31.08.2026) — форма "Нове замовлення" має три
   колонки (Клієнт / Звідки замовлення / Доставка й оплата), не дві —
   .hh-order-head--3col лишає ширший брейкпоінт для третьої колонки, щоб
   на планшетній ширині (900-1200px) колонки не стискались до нечитабельних. */
@media (min-width: 1200px) {
  .hh-order-head--3col { grid-template-columns: 1fr 1fr 1fr; }
}
/* min-width:0 — issue живого репорту 29.08.2026 («Створити ТТН», довгі
   назви складів/вулиць у автопідказці зсували сусідню колонку вбік):
   grid-track за замовчуванням не стискається нижче min-content дитини,
   тому непереносний довгий рядок (без .hh-list__body-обгортки, той
   самий фікс у ttn-create-form.js) розтягував трек ширше за `1fr` і
   штовхав сусідню колонку. min-width:0 — стандартний ідіом для grid/
   flex-дитини, що має право стискатись і давати власним нащадкам
   (overflow:hidden;text-overflow:ellipsis) реально спрацювати. */
.hh-order-head__col { display: flex; flex-direction: column; min-width: 0; }

/* instruction-order-view.md §2/§4 крок 2 (01.09.2026) — шапка ЖИВОГО
   замовлення трьома колонками (Клієнт / Звідки замовлення / Доставка й
   оплата), БЕЗ картки-обгортки з рамкою (§11.4): лінії розділяють колонки
   й рядки, не border+background, як .hh-order-head вище (та лишається для
   форми створення). Пари ключ-значення (.hh-kv-row) — не поля вводу. */
.hh-order-head-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--border-w) solid var(--border);
  border-bottom: var(--border-w) solid var(--border);
  margin-bottom: var(--sp-4);
}
@media (min-width: 900px) {
  .hh-order-head-3col { grid-template-columns: 1fr 1fr 1fr; }
}
.hh-order-head-3col__col { padding: var(--sp-3) var(--sp-4); min-width: 0; }
.hh-order-head-3col__col + .hh-order-head-3col__col { border-top: var(--border-w) solid var(--border); }
@media (min-width: 900px) {
  .hh-order-head-3col__col + .hh-order-head-3col__col { border-top: none; border-left: var(--border-w) solid var(--border); }
}
.hh-order-head-3col__title {
  font-size: 11px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .02em; margin: 0 0 var(--sp-2);
}

/* Рядок пари ключ-значення шапки — §4: ~26px, 12px, лінія знизу тонша за
   .hh-kv (той залишається для решти карток). */
.hh-kv-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); min-height: 26px; padding: 4px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 12px;
}
.hh-kv-row:last-child { border-bottom: none; }
.hh-kv-row__k { color: var(--text-muted); flex: none; }
.hh-kv-row__v { color: var(--text); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-kv-row--editable { cursor: pointer; }
.hh-kv-row--editable:hover .hh-kv-row__v { text-decoration: underline dotted; text-underline-offset: 2px; }
.hh-kv-row--locked { cursor: help; }
/* «Канал» картки замовлення (06.10.2026): олівець біля значення, вибір —
   select на місці. Значення не обрізається, поки обирають: select займає
   рядок до мітки (на 375px — уся ширина картки мінус мітка). */
.hh-kv-row__pen { color: var(--text-faint); display: inline-flex; vertical-align: -2px; }
.hh-kv-row--editable:hover .hh-kv-row__pen, .hh-kv-row--editable:focus-visible .hh-kv-row__pen { color: var(--text); }
.hh-kv-row--select .hh-kv-row__v {
  flex: 1 1 auto; overflow: visible; white-space: normal;
  display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end;
}
.hh-kv-row--select .hh-select { min-width: 0; flex: 1 1 auto; max-width: 260px; }
.hh-order-title-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.hh-order-channel-chip { max-width: 100%; display: inline-flex; align-items: center; gap: 4px; }
button.hh-order-channel-chip { cursor: pointer; font-family: inherit; }
/* Рядок-перемикач (картка замовлення, «Корпоративне», 03.10.2026): мітка
   з ⓘ ліворуч, компактний .hh-switch праворуч — той самий ритм, що
   сусідні пари. Перемикач не тягне рядок до --touch (44px): усі рядки
   картки однакової висоти, зона дотику — сам трек 44×26.
   Значення тут не обрізається (overflow видимий) — інакше обвідка фокусу
   перемикача зрізалась би. Розгорнуте пояснення ⓘ лягає під мітку в межах
   ширини мітки (flex 1 1 0), перемикач лишається праворуч угорі. */
.hh-kv-row--toggle .hh-kv-row__k { flex: 1 1 0; min-width: 0; }
.hh-kv-row--toggle .hh-kv-row__v { flex: none; overflow: visible; display: flex; }
.hh-kv-row--toggle .hh-switch { min-height: 0; }
.hh-kv-row--toggle:has(details[open]) { align-items: flex-start; }

/* Розділи-без-картки (§11.4) — «Позиції»/«Оплати»/«Доставка й ТТН» на
   живій сторінці замовлення відділені лінією знизу, не border+padding
   картки (.hh-card лишається деінде, де рамка справді картка-сутність). */
.hh-order-section { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: var(--border-w) solid var(--border); }
.hh-order-section:last-child { border-bottom: none; }

/* Згорнута шапка — один рядок-резюме (Частина III: «Марія Коваль ·
   Instagram · Нова Пошта, Львів №5 · післяплата»). Після заповнення саме
   вона лишається на екрані, а не порожнеча — щоб таблиця товарів піднялась
   вище без прокрутки. */
.hh-order-head--collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.hh-order-head__summary { font-size: var(--size-body); color: var(--text); }
.hh-order-head__collapse { align-self: flex-start; margin-top: var(--sp-2); grid-column: 1 / -1; }

/* Товари + резюме поруч на десктопі (Частина II, V брифу) — підсумок і
   кнопка «Провести» завжди видимі, без прокрутки до окремого блоку внизу.
   На телефоні резюме йде під таблицею й прилипає до низу тим самим
   прийомом, що .hh-formbar в інших формах. */
.hh-order-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 900px) {
  .hh-order-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.hh-order-main { min-width: 0; }

/* Картка торгового документа (чек, видаткова, списання — design/screen-
   showrooms.js renderOneLive). Та сама `.hh-order-layout` (основне +
   сайдбар 320px від 900px), лише ліва колонка розведена на ДВІ грід-
   комірки: `.hh-order-main` (позиції з підсумком) і `.hh-doc-rest`
   (коментар, історія, ТТН, 1С), а сайдбар `.hh-doc-side` тягнеться на обидва
   рядки. DOM-порядок main → side → rest — і є телефонний порядок
   (позиції → оплата → фіскалізація → … → коментар), без CSS `order`.
   Рядок rest — `1fr`: сайдбар, вищий за позиції, віддає надлишок висоти
   йому, а не рядку позицій (інакше між позиціями й коментарем з'являлась
   би дірка на висоту сайдбара). Власник 26.09.2026. */
.hh-doc-layout { gap: var(--sp-4); }
.hh-doc-side, .hh-doc-rest { min-width: 0; }
@media (min-width: 900px) {
  .hh-doc-layout { grid-template-rows: auto 1fr; }
  .hh-doc-layout > .hh-order-main { grid-column: 1; grid-row: 1; }
  .hh-doc-layout > .hh-doc-side   { grid-column: 2; grid-row: 1 / span 2; }
  .hh-doc-layout > .hh-doc-rest   { grid-column: 1; grid-row: 2; }
}

/* Блок «1С» картки видаткової — ОСТАННІЙ у правій колонці (власник,
   05.10.2026). Розмітка двічі (screen-showrooms.js renderOneLive):
   .hh-doc-onec--side — кінцем сайдбара, видно від 900px; .hh-doc-onec
   ПІСЛЯ .hh-doc-rest — останній блок на телефоні, від 900px схований.
   Раніше від 900px це була окрема грід-комірка в рядку 3 — і починалась
   лише під позиціями: коли позиції вищі за сайдбар, над «1С» у правій
   колонці стояла порожнеча (власник 08.10.2026, 00НФ-002275). */
.hh-doc-onec { min-width: 0; }
.hh-doc-onec--side { display: none; }
@media (min-width: 900px) {
  .hh-doc-layout > .hh-doc-onec { display: none; }
  .hh-doc-side > .hh-doc-onec--side { display: block; }
}

/* «Коментарі» торгового документа — один компонент на замовлення, чек,
   видаткову, списання, звіт комісіонера (HH_SALES.docCommentsHtml,
   sales-shared.js; власник 29.09.2026, 09.10.2026). Окремої кнопки
   «Змінити коментар…» немає: клікабельний сам текст коментаря (або тихий
   плейсхолдер «Додати коментар…») — без рамки й заливки у спокої,
   наведення — курсор тексту й легкий фон (§2 дизайн-коду: не заливка).
   Відступ однаковий у спокої й на hover/фокусі — без зсуву розкладки;
   фокус — обведення (outline), не рамка. Розкрите поле — на всю ширину,
   «Скасувати»/«Зберегти» під ним праворуч, на телефоні — кожна на
   половину ширини (великий палець влучає, §13 CLAUDE.md). [hidden] —
   явно, бо display класу інакше перебив би атрибут. */
.hh-doc-comments { margin-bottom: var(--sp-4); }
.hh-doc-comments [hidden] { display: none !important; }
.hh-doc-comments__list { margin-top: var(--sp-2); }
.hh-doc-comments__body { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: var(--weight-regular); }
.hh-doc-comments__empty { margin: var(--sp-2) 0 0; }
.hh-doc-comments__text { margin: var(--sp-2) 0 0; }
.hh-doc-comments__notice { margin: var(--sp-2) 0 0; }
.hh-doc-comments__display {
  display: block;
  width: calc(100% + 2 * var(--sp-2)); min-height: 36px;
  margin: var(--sp-1) calc(-1 * var(--sp-2)) 0;
  padding: var(--sp-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; text-align: left;
  cursor: text;
  transition: background var(--dur) var(--ease);
}
.hh-doc-comments__display:hover { background: var(--surface-hover); }
.hh-doc-comments__display:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; background: var(--surface-hover); }
.hh-doc-comments__display--empty { color: var(--text-faint); }
.hh-doc-comments__display--empty:hover { color: var(--text-muted); }
.hh-doc-comments__placeholder { font-size: 12.5px; }
.hh-doc-comments__editor { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.hh-doc-comments__input { width: 100%; }
.hh-doc-comments__hint, .hh-doc-comments__error { margin: 0; }
.hh-doc-comments__error { color: var(--danger); }
.hh-doc-comments__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); }
@media (max-width: 767px) {
  .hh-doc-comments__actions > .hh-btn { flex: 1 1 0; }
}

/* Картка товару в каталозі (design/screen-products.js renderOneLive) — та
   сама `.hh-doc-layout`, модифікатор лише для стосу блоків сайдбара:
   Ціни → Акції йдуть з однаковим проміжком (gap), без власних margin-top
   у кожного блоку. На десктопі верх правої колонки опущено на той самий
   відступ, що має перший блок основної колонки («Колекції», margin-top
   --sp-3), — щоб верхи колонок збігались. Праву колонку відкриває слот
   «Завдання» (.hh-tasks-slot, нижче в цьому файлі), тож відступ — на ньому,
   а сайдбар під ним стоїть на gap сітки. Не sticky. Власник 26.09.2026. */
.hh-product-side { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 900px) {
  .hh-product-side { padding-top: var(--sp-3); }
  .hh-product-layout.hh-with-tasks > .hh-tasks-slot { padding-top: var(--sp-3); }
  .hh-product-layout.hh-with-tasks > .hh-product-side { padding-top: 0; }
}

/* Компактна довідкова картка сайдбара документа (Оплата, Фіскалізація,
   Про чек, Документ, Повернення). 01-rules/instruction-design-
   scale.md: картка 12px 14px (§4), текст 12–12.5px, мітка 12px --text-muted,
   рядок списку 4px 0 (§4 «6–9px 0» — тут ще щільніше, бо рядок ключ-
   значення, а не пункт списку; той самий ритм, що .hh-kv-row картки
   замовлення), числа tabular-nums (§8). `.hh-kv` поза цією карткою не
   змінюється. */
.hh-doc-panel { padding: var(--sp-3) 14px; margin-bottom: var(--sp-3); }
/* Блок, що вимагає дії (615: «Мета списання» не обрана) — семантичний
   критичний колір дизайн-коду (--danger/--danger-quiet/--danger-border), та
   сама трійка, що .hh-banner--danger і .hh-chip--danger, не новий колір. */
.hh-card.hh-card--danger { background: var(--danger-quiet); border-color: var(--danger-border); }
.hh-doc-panel__body { margin-top: var(--sp-1); }
.hh-doc-panel .hh-kv {
  align-items: baseline; gap: var(--sp-2);
  padding: 4px 0; font-size: 12.5px; line-height: 1.35;
  border-bottom: 1px solid var(--border-faint);
}
.hh-doc-panel .hh-kv:last-child { border-bottom: none; }
.hh-doc-panel .hh-kv__k { font-size: 12px; flex: 0 1 auto; }
.hh-doc-panel .hh-kv__v { min-width: 0; overflow-wrap: anywhere; }
.hh-doc-panel .hh-code { font-size: 12px; }
.hh-doc-panel__sum { margin-top: 2px; border-top: 1px solid var(--border); }
.hh-doc-panel__link { display: inline-block; margin-top: var(--sp-1); font-size: 12px; }
.hh-doc-panel__more { margin-top: var(--sp-1); }
/* Картка «Клієнт» документа продажу (власник 29.09.2026: «клієнт губиться»):
   ім'я — найпомітніший текст сайдбара, під ним хто це й телефон. */
.hh-client-head { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.hh-client-head__text { min-width: 0; }
.hh-client-head__name { font-size: 16px; font-weight: var(--weight-bold); line-height: 1.3; overflow-wrap: anywhere; }

.hh-doc-panel__more > summary { font-size: 11px; padding: 4px 0; }
/* Рядки-списки всередині (сертифікати, повернення) — без 60px мінімуму
   .hh-list__item: у вузькому сайдбарі це знову «велика картка». */
.hh-doc-panel .hh-list__item { min-height: 0; padding: 6px var(--sp-2); font-size: 12.5px; }

/* Спосіб оплати — рядком ключ-значення, що розкривається (не карткою
   .hh-list__item, як до 26.09.2026). Кнопка — бо розкриває деталі
   (клавіатура, aria-expanded). */
.hh-doc-pay-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  width: 100%; min-height: 26px; padding: 4px 0;
  background: none; border: 0; border-bottom: 1px solid var(--border-faint);
  color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.hh-doc-pay-row:hover .hh-doc-pay-row__k { text-decoration: underline dotted; text-underline-offset: 2px; }
.hh-doc-pay-row__v { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Останній рядок способу оплати — без власної лінії: під ним і так межа
   блоку «До сплати/Внесено/Різниця» (.hh-doc-panel__sum), дві лінії поспіль
   читались би як порожній рядок. */
.hh-doc-panel__body > .hh-doc-pay-row:last-child { border-bottom: none; }
.hh-doc-pay-row__detail { margin: 2px 0 var(--sp-1); font-size: 11px; }
@media (max-width: 899px) {
  /* Телефон — палець, не курсор: рядок, що розкривається, не нижчий за 32px. */
  .hh-doc-pay-row { min-height: 32px; align-items: center; }
}

.hh-order-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .hh-order-summary { position: sticky; top: var(--sp-4); } }
.hh-order-summary__stats { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-order-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.hh-order-summary__value { font-size: var(--size-h3); font-weight: var(--weight-medium); }
.hh-order-summary__actions { display: flex; flex-direction: column; gap: var(--sp-2); }

/* АРТИСТИ & ТУРИ — двоколонковий layout (`.hh-artists-layout`/
   `.hh-artists-primary`/`.hh-artists-secondary`) ПРИБРАНО 14.09.2026:
   «Актуальні тури», що жили в лівій колонці поруч зі списком артистів,
   переїхали на Головну X (design/screen-x-home.js, під картку «Артисти»,
   `.hh-split`/`.hh-split--2-1` нижче — той самий рецепт двох колонок, уже
   без потреби в окремих класах під цей екран). Екран «Артисти & Тури»
   тепер одна картка (renderArtistsCard, screen-artists.js).

   На телефоні картка резюме лишається у звичайному потоці (наскрізний
   прогін довший за один екран у будь-якому разі), але самі дії — «Провести»
   насамперед — прилипають до низу тим самим прийомом, що .hh-formbar
   скрізь: підсумок і кнопка не мають вимагати повторного пошуку внизу
   довгої форми (Частина V брифу). */
@media (max-width: 899px) {
  .hh-order-summary__actions {
    position: sticky;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    z-index: var(--z-sticky);
    padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
    margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
    padding-left: var(--sp-4); padding-right: var(--sp-4);
    background: linear-gradient(to top, var(--bg) 70%, transparent);
  }
}

/* Пошук товару — результати випадають прямо під полем, а не десь на
   екрані (Частина IV.4 брифу): менеджер не відводить погляд від того, що
   щойно набрав. */
.hh-order-search { position: relative; }
/* ПІД таблицею вже доданого, не поверх неї — перша версія накривала набиті
   позиції результатами пошуку, і закрити це було нічим. Картка з рамкою й
   кнопкою «Закрити ×» (Escape теж працює) — межа має бути видима, а не
   малюватись відступом, який легко переплутати з рештою форми. */
.hh-order-search__results {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.hh-order-search__row { align-items: center; gap: var(--sp-3); }
.hh-order-sizes { display: flex; gap: 4px; flex-wrap: wrap; }
.hh-size-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-2);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-small);
  cursor: pointer;
}
.hh-size-btn:hover { background: var(--surface-hover); }
.hh-size-btn:disabled { color: var(--text-faint); cursor: not-allowed; opacity: .6; }
.hh-size-btn--in { border-color: var(--accent); color: var(--accent); }
/* «Є в наявності» — той самий зелений (color+quiet-bg+border), що
   .hh-chip--ok вище (issue #381): наявність тепер лише підсвічує розмір,
   а не блокує решту — жоден розмір тут не disabled навмисно. */
.hh-size-btn--stock { color: var(--ok); background: var(--ok-quiet); border-color: var(--ok-border); }
.hh-size-btn--stock.hh-size-btn--in { border-color: var(--accent); }
/* Залишок ЦЬОГО розміру — цифрою на самій кнопці, не спільним числом десь
   поруч (звідси й плутанина, яку відловив Роман: агрегат під назвою
   виглядав як залишок кожного розміру). */
.hh-size-btn sup { color: var(--text-faint); margin-left: 1px; font-size: .7em; }

/* Рядок таблиці = товар-колір, не розмір (Частина IV брифу): «Худі
   Преміум, Молочний» у трьох розмірах — один рядок, а не три однакових.
   Наявність — перше, що видно, без наведення чи кліку. */
.hh-order-table { display: flex; flex-direction: column; gap: var(--sp-4); }
.hh-order-row {
  padding: var(--sp-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.hh-order-row__head { display: flex; align-items: center; gap: var(--sp-3); }
.hh-order-row__head .hh-list__body { flex: 1; }
.hh-order-row__sizes { display: flex; flex-direction: column; }

/* Клітинка розміру як речення (docs/ui-rules.md §VI): розмір → скільки є
   → де саме → скільки береш, зліва направо, в одному рядку. «Немає ніде» —
   інший фон і колір факту, а не «0» серед звичайних чисел: два різні
   повідомлення мають виглядати по-різному, інакше око їх не розрізняє. */
.hh-size-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-1);
  border-bottom: var(--border-w) solid var(--border-faint);
}
.hh-order-row__sizes .hh-size-row:last-child { border-bottom: 0; }
.hh-size-row--active { background: var(--surface-sunken); }
.hh-size-row--empty { background: var(--danger-quiet); }
.hh-size-row__label { font-weight: var(--weight-medium); min-width: 2.5em; }
.hh-size-row__sep { color: var(--text-faint); margin-left: -6px; }
.hh-size-row__fact { color: var(--text); }
.hh-size-row__fact--empty { color: var(--danger); font-weight: var(--weight-medium); }
.hh-size-row__take { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* Ціна за штуку · сума по рядку (issue #126, мокап) — між фактом наявності
   й контролем кількості, той самий порядок читання зліва направо. */
.hh-size-row__money { display: flex; align-items: baseline; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.hh-size-row__empty-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }

.hh-order-row__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: var(--border-w) dashed var(--border-faint);
}
.hh-order-row__sum { margin-left: auto; font-weight: var(--weight-medium); }
.hh-order-row__discount { display: flex; gap: 4px; }

/* --------------------------------------------------------------------------
   СПРАВЖНЯ ТАБЛИЦЯ ПОЗИЦІЙ (issue #126, живий фідбек Романа 23.08.2026) —
   мокап поруч із живим екраном показав, що попередній крок лишив
   «речення»-рядки (.hh-order-row/.hh-size-row вище) замість таблиці:
   Роман прямо назвав це помилковим рішенням. Рядок тепер — ОДНА вже
   додана позиція (товар-колір-розмір), колонки Товар · Розмір ·
   Кількість · Ціна · Сума рівно як на мокапі. Стара розмітка
   (.hh-order-row тощо) лишається в файлі невикористаною навмисно, не
   видалена — той самий компонент ще читає її docstring-посилання з
   реального мокапу (docs/for-architecture.md), прибрати можна окремим
   кроком прибирання мертвого CSS, не тут.
   -------------------------------------------------------------------- */
.hh-order-linetable-wrap { overflow-x: auto; }
.hh-order-linetable { width: 100%; border-collapse: collapse; }
.hh-order-linetable th {
  text-align: left;
  font-size: var(--size-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--weight-medium);
  padding: 0 var(--sp-2) var(--sp-2);
  border-bottom: var(--border-w) solid var(--border);
  white-space: nowrap;
}
.hh-order-linetable th.hh-num { text-align: right; }
.hh-order-linetable td {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: var(--border-w) solid var(--border-faint);
  font-size: var(--size-small);
  vertical-align: top;
}
.hh-order-linetable td.hh-num { text-align: right; font-variant-numeric: tabular-nums; }
.hh-order-linetable tr:last-child td { border-bottom: 0; }
.hh-order-linetable tr:hover { background: var(--surface-hover); }

.hh-order-line-product { display: flex; gap: var(--sp-3); align-items: flex-start; }
.hh-order-fit-hint { display: block; margin-top: 4px; }

/* «2·1·0» — замовлено·зарезервовано·відвантажено (мокап qty3), тут завжди
   з видимим замком: на цій формі-чернетці резерв/відвантаження або
   гарантовано нульові (ще не збережено), або відомі лише на картці
   збереженого замовлення — див. докстрінг lineTableRow у screen-orders.js. */
.hh-order-qty3 { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.hh-price-was { color: var(--text-faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.hh-price-now { font-weight: 600; font-variant-numeric: tabular-nums; }
.hh-discount-entry { align-items: flex-start; gap: var(--sp-2); }
.hh-order-sum__was { color: var(--text-faint); text-decoration: line-through; font-size: var(--size-caption); }

/* --------------------------------------------------------------------------
   ПЕРЕМИКАЧ СПОСОБУ ДОДАВАННЯ (мокап issue #126: Пошук/Каталог/Сканер/Як
   минулого разу) — лише «Пошук» живий, решта показані сірими із замком
   (title), не прибрані з розмітки: Роман 23.08 — «людина не повинна
   бачити, що блоку тут просто немає». */
.hh-method-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius);
  padding: 3px;
  width: fit-content;
  margin-bottom: var(--sp-3);
}
.hh-method-tabs__tab {
  padding: 6px var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--size-small);
  color: var(--text-muted);
}
.hh-method-tabs__tab--on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.hh-method-tabs__tab--locked { cursor: help; opacity: .7; }

/* --------------------------------------------------------------------------
   АВАТАР-ІНІЦІАЛИ КЛІЄНТА (мокап issue #126) */
.hh-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--accent-quiet);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--size-h3);
  flex: none;
}

/* Сітка «Мій фіт / Остання покупка / RE:WEAR / Договір·канал» під карткою
   клієнта (мокап issue #126). */
.hh-order-client-grid {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--border-w) solid var(--border-faint);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 640px) { .hh-order-client-grid { grid-template-columns: repeat(4, 1fr); } }
.hh-order-client-cell { display: flex; flex-direction: column; gap: 2px; }
.hh-order-client-cell__v { font-size: var(--size-small); font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   ПРАВА КОЛОНКА: СТАН / СУМА / ІСТОРІЯ (мокап issue #126) — три окремі
   картки замість одного блока статистики. */
.hh-order-rail-card + .hh-order-rail-card { margin-top: var(--sp-3); }

/* «Перед прийняттям» (issue #756, мокап v3) — умови, що блокують
   «Прийняти замовлення», написані словами (preConfirmChecklist,
   design/screen-orders.js), не мовчазний disabled на кнопці. */
.hh-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.hh-checklist__item { font-size: var(--size-small); }

/* --------------------------------------------------------------------------
   «КОМУНІКАЦІЇ» — АВАТАРКА З БЕЙДЖЕМ КАНАЛУ (§8 instruction-communications-
   site-chat-telegram.md, design/screen-communications.js). Бейдж — маленький
   кружечок у куті аватарки (той самий прийом, що онлайн-статус у месенджерах),
   НЕ текстовий напис перед іменем: напис звужував би саме поле під ім'я
   клієнта в списку розмов, чого §8 прямо не хоче. `.hh-avatar-circle` —
   наявний клас ініціал-аватарки (issue #126), тут лише зменшений під рядок
   списку/шапку треду й обгорнутий у позиційну рамку для бейджа. */
.hh-comm-avatar { position: relative; flex: none; width: 36px; height: 36px; }
.hh-comm-avatar .hh-avatar-circle { width: 36px; height: 36px; font-size: var(--size-body); }
.hh-comm-avatar__photo {
  width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; display: block;
}
.hh-comm-avatar__badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--surface); border: var(--border-w) solid var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
}
/* Telegram-бейдж — inline SVG (screen-communications.js ICON_TELEGRAM),
   не текстовий emoji: власний viewBox, тому розмір задаємо явно (font-size
   вище на нього не діє). Брендові кольори SVG зашиті в самому значку — той
   самий круглий синій контур в обох темах (світла/темна), CLAUDE.md §13
   не вимагає темної адаптації для чужого бренд-лого, лише для елементів
   CORE. */
.hh-comm-avatar__badge svg { width: 14px; height: 14px; display: block; }
/* Тони акаунта каналу (854, власник 10.10.2026: «h»/«b» біля значка
   Instagram і свій фон чату для @_bazovi_). Ключ приходить із
   налаштувань channel_account (перелік — src/lib/channel-account-settings.js
   і CHECK у базі); кольори — лише з токенів, тож світла й темна теми
   (tokens.css :root / [data-theme="light"]) мають свої значення без
   жодного hex тут. */
.hh-acct-tone--sky        { --acct-fg: var(--info);    --acct-bg: var(--info-quiet);    --acct-border: var(--info-border); }
.hh-acct-tone--forest     { --acct-fg: var(--ok);      --acct-bg: var(--ok-quiet);      --acct-border: var(--ok-border); }
.hh-acct-tone--amber      { --acct-fg: var(--warn);    --acct-bg: var(--warn-quiet);    --acct-border: var(--warn-border); }
.hh-acct-tone--terracotta { --acct-fg: var(--danger);  --acct-bg: var(--danger-quiet);  --acct-border: var(--danger-border); }
.hh-acct-tone--moss       { --acct-fg: var(--x-chip-text); --acct-bg: var(--x-chip-bg); --acct-border: var(--x-chip-border); }
.hh-acct-tone--lavender   { --acct-fg: var(--storefront-chip-text); --acct-bg: var(--storefront-chip-bg); --acct-border: var(--storefront-chip-border); }
/* Літера акаунта — ліворуч від бейджа каналу в тому самому нижньому куті
   аватарки; без тону — нейтральна (текст і поверхня теми). */
.hh-comm-avatar__acct,
.hh-acct-badge-preview {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  border-radius: var(--radius-full);
  font-size: 10px; line-height: 1; font-weight: 700; text-transform: lowercase;
  color: var(--acct-fg, var(--text)); background: var(--acct-bg, var(--surface-raised));
  border: var(--border-w) solid var(--acct-border, var(--border-strong));
}
.hh-comm-avatar__acct { position: absolute; right: 14px; bottom: -2px; }
/* Фон стрічки чату акаунта — підкладка тону, повідомлення лишаються своїми
   бульбашками поверх неї. */
.hh-comm-thread-scroll--toned {
  background: var(--acct-bg); border-radius: var(--radius); padding: var(--sp-2);
  /* 874: рамка в тоні — фон помітний і там, де бульбашки закривають майже все. */
  border: var(--border-w) solid var(--acct-border);
}
/* Пігулка бренду акаунта (874, «Базові» / «Hygge») — у рядку списку, шапці
   розмови й картці налаштувань. Кольори — з тону акаунта (токени теми). */
.hh-acct-brand {
  display: inline-flex; align-items: center; max-width: 12em;
  padding: 1px 8px; border-radius: var(--radius-full); box-sizing: border-box;
  font-size: 11px; line-height: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--acct-fg, var(--text)); background: var(--acct-bg, var(--surface-raised));
  border: var(--border-w) solid var(--acct-border, var(--border-strong));
}
/* Кільце значка каналу на аватарці в тоні бренду (874). */
.hh-comm-avatar__badge--ring { box-shadow: 0 0 0 2px var(--acct-fg); }
/* «Відповідаєте як Базові (@_bazovi_)» — над полем відповіді (874). */
.hh-comm-reply-as {
  margin: 0 0 var(--sp-1); padding: 6px var(--sp-2); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.35;
  color: var(--acct-fg); background: var(--acct-bg); border: var(--border-w) solid var(--acct-border);
}
/* Налаштування розмов акаунта в картці «Підключення Meta». */
.hh-comm-acct-settings { padding-left: var(--sp-5); }
.hh-comm-acct-settings__head { justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.hh-comm-acct-settings--open {
  border: var(--border-w) solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3); margin-left: var(--sp-5);
}
.hh-comm-acct-settings__form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.hh-comm-acct-settings__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.hh-comm-acct-settings__colls {
  max-height: 220px; overflow-y: auto; display: flex; flex-direction: column;
  border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--sp-2);
}
.hh-comm-acct-settings__switch { display: flex; align-items: flex-start; }
.hh-comm-acct-settings__switch > span:last-child { display: flex; flex-direction: column; }
@media (max-width: 599.98px) {
  .hh-comm-acct-settings, .hh-comm-acct-settings--open { padding-left: 0; margin-left: 0; }
  .hh-comm-acct-settings--open { padding: var(--sp-2); }
}
/* Той самий значок каналу в рядку «Підключення Meta» (вкладка «Коментарі»,
   instruction-communications-instagram.md) — без кружечка-підкладки. */
.hh-comm-meta-icon { display: inline-flex; }
/* Пост, під яким гілка коментарів (607_meta_contact_profile_and_posts.sql):
   картка над стрічкою треду й підказка в рядку списку. Мініатюра — квадрат
   з object-fit: cover, бо пости бувають і 4:5, і 9:16. */
.hh-comm-post { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-2); }
.hh-comm-post__thumb {
  flex: none; width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; display: block;
}
.hh-comm-post__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-comm-post__caption { overflow-wrap: anywhere; font-size: var(--size-small); line-height: var(--lh-small); }
.hh-comm-row-post { display: flex; gap: 6px; align-items: center; min-width: 0; margin-top: 2px; }
.hh-comm-row-post .hh-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-comm-row-post__thumb {
  flex: none; width: 20px; height: 20px; border-radius: 4px; object-fit: cover; display: block;
}
/* Банер 24-годинного вікна Instagram над полем відповіді — щільніший за
   звичайний .hh-banner і не стискається: колонка треду має фіксовану висоту,
   і кожен зайвий відступ тут забирає рядки стрічки повідомлень (особливо на
   телефоні, 375px). */
.hh-comm-window { flex: none; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.hh-comm-window .hh-check { min-height: 0; }
.hh-comm-meta-icon svg { width: 16px; height: 16px; display: block; }

/* --------------------------------------------------------------------------
   «КОМУНІКАЦІЇ» — ТРИКОЛОНКОВА РОЗКЛАДКА МЕНЕДЖЕРА (§9 instruction-
   communications-site-chat-telegram.md): список / тред / контекст клієнта
   одним екраном, не три окремі сторінки. Тільки для десктопа (§13 CLAUDE.md
   — телефон лишається польовим сценарієм, польова роль гортає переписку на
   весь екран, не звіряє картку клієнта поруч) — на вузькому екрані бачимо
   рівно одну колонку (список АБО тред), контекстна панель ховається зовсім. */
.hh-comm-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: stretch; height: 100%; min-height: 0; }
@media (min-width: 1040px) {
  /* Ліва колонка звужена 300px → 200px (Роман, 14.09.2026, живий
     скріншот — «забагато місця під список розмов»): картка розмови
     (convRowHtml) несе аватар (36px) + назву + прев'ю останнього
     повідомлення, решта (статус/непрочитане/дата) стоїть стовпчиком
     праворуч (.hh-comm-row-side) і своєї ширини майже не потребує.
     200px підібрано так, щоб назва клієнта й двострічкове прев'ю
     (.hh-comm-row-preview нижче) ще переносились/обрізались коректно
     (ellipsis/line-clamp вже стоять), а не ламали картку. */
  /* 30.09.2026 (власник, скріни 1280/1440): 200px виявилось замало —
     ім'я/логін обрізались до «140…», прев'ю — до двох слів. Тепер
     ліва колонка — 30% ширини, але не менше 300px і не більше 380px:
     на 1280 це ~300px (тред лишається читабельним), на 1440 — ~345px.
     Права колонка 320 → 300px: її вміст (картка клієнта, пошук товару)
     вміщається, а тред не стискається нижче ~360px на 1280. */
  .hh-comm-layout { grid-template-columns: clamp(300px, 30%, 380px) minmax(0, 1fr) 300px; }
  .hh-comm-col--list { display: block !important; height: 100%; overflow-y: auto; }
  /* Права колонка (issue Романа 14.09.2026, пп.1-3) — спочатку мала лише
     `position: sticky` без обмеження висоти (сам блок не скролився, зате
     не стримував ВИСОТУ рядка грід-розкладки), тоді замінено на
     `max-height: calc(100vh - 160px)` — здогад про висоту шапки й смуги
     підрозділів над колонками, який лишав ЗОВНІШНЮ сторінку такою, що й
     далі можна було докрутити до футера (issue того ж дня, п.2-3 —
     shell.css, `.hh-shell:has(.hh-comms-embed)`). Тепер `.hh-comm-layout`
     сам отримує РЕАЛЬНУ висоту від батька (shell.css вище — увесь
     ланцюжок аж до `.hh-shell` фіксований по в'юпорту саме на цій
     вкладці), тож `height: 100%` тут — точна величина, не здогад, і
     `position: sticky` більше не потрібен: колонці нема відносно чого
     "прилипати", вона вже займає всю доступну висоту сама. Той самий
     рецепт, що `.hh-comm-col--list` вище — дві незалежні зони скролу. */
  .hh-comm-col--context {
    display: block !important;
    height: 100%; overflow-y: auto;
  }
}
.hh-comm-col--list, .hh-comm-col--context { display: none; }
/* Порожня розкладка (жодна розмова не відкрита, власник 05.10.2026) —
   на вузькому екрані це просто список: колонка списку видима, порожній
   тред-заглушка — ні. На широкому діють звичайні три колонки вище. */
.hh-comm-layout--empty .hh-comm-col--list { display: block; }
@media (max-width: 1039.98px) {
  .hh-comm-layout--empty .hh-comm-col--thread { display: none; }
}

/* «← Усі розмови» й mobile-дубль блоку управління (редизайн 14.09.2026,
   пп.1-3) — на десктопі (≥1040px, той самий брейкпоінт, що вмикає праву
   колонку вище) обидва зайві: список завжди видно поруч (нема куди
   "повертатись"), а ім'я/чіп/дії вже показує права колонка
   (.hh-comm-context, chatManageBlockHtml). На вузькому екрані — навпаки,
   права колонка ховається (§13 CLAUDE.md), і це єдиний спосіб побачити
   список і виконати дії над чатом, тому лишаються видимими за
   замовчуванням. */
.hh-comm-mobile-manage { margin-bottom: var(--sp-3); }
@media (min-width: 1040px) {
  .hh-comm-backbar, .hh-comm-mobile-manage { display: none; }
}

/* Компактний рядок списку розмов (Роман, 14.09.2026 — «забагато повітря»:
   заголовки вкладок і картки розмови займали більше місця, ніж треба).
   Модифікатор `.hh-list--comm` (renderList(api, true), screen-
   communications.js) — лише для вузької лівої колонки трикомпонентної
   розкладки (.hh-comm-col--list): базовий `.hh-list__item`
   (min-height:60px, padding sp-3/sp-4) розрахований на реєстри, де рядок
   несе один факт; тут — аватар + назва + вже стиснуте до 2 рядків прев'ю
   (.hh-comm-row-preview) + стек чіпів праворуч, контенту й так достатньо
   для рядка, зайвий запас лише росте скролом. Мобільна повноекранна
   сторінка «Комунікації» (renderList(api) без compact) цей клас не
   отримує — там лишається штатний тач-таргет §13 CLAUDE.md. */
/* Лише на широкому (05.10.2026): порожня розкладка показує ту саму ліву
   колонку і на телефоні — там рядок лишається штатним тач-таргетом. */
@media (min-width: 1040px) {
  .hh-list--comm .hh-list__item { min-height: 0; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .hh-list--comm .hh-list__title { font-size: var(--size-small); line-height: var(--lh-small); }
}

/* Активний рядок списку (редизайн 14.09.2026) — та сама підсвітка
   вибраного елемента, що .hh-suggest__item--active/.hh-size-row--active
   вище, не новий токен.

   БАГ (живий, 14.09.2026, Роман: «не підсвічений активний чат» —
   регрес того самого дня, коли клас додали): рядки — це <button
   class="hh-list__item">, і вище в цьому файлі є `button.hh-list__item
   { background: transparent; ... }` (скид кнопки, рядок ~1601) —
   специфічність елемент+клас (0,1,1). Голий `.hh-list__item--active` —
   лише клас, (0,1,0). Менша специфічність програє незалежно від
   порядку в файлі, тож transparent завжди перебивав підсвітку: клас
   і view.mode/view.id рухались коректно (JS не був зламаний), але на
   екрані нічого не змінювалось. Той самий патерн, що вже описаний вище
   для `.hh-list__item--cursor` (21.08.2026) — фікс той самий:
   складений селектор `.hh-list__item.hh-list__item--active` піднімає
   специфічність до (0,2,0), вище за скид кнопки. */
.hh-list__item.hh-list__item--active { background: var(--surface-sunken); }
.hh-list__item.hh-list__item--active:hover { background: var(--surface-sunken); filter: brightness(0.97); }

/* Права частина рядка списку (редизайн 14.09.2026, п.6) — тема-чіп/
   непрочитане/чіп статусу зверху, дата — рядком під ними: той самий
   контейнер, що раніше клав усе в один горизонтальний ряд, тепер
   вертикальним стеком, притиснутим праворуч. */
.hh-comm-row-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none;
}
/* Чипи рядка — одним рядком, без переносу (30.09.2026). */
.hh-comm-row-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; }

/* Прев'ю останнього повідомлення в картці розмови (issue Романа
   14.09.2026) — бекенд уже обрізає до 80 символів (left(...,80),
   screen-communications.js convRowPreview), але й це переносилось на
   кілька рядків у вузькій колонці й розтягувало картку по висоті залежно
   від того, скільки клієнт написав. `-webkit-line-clamp` обрізає видиму
   частину до 2 рядків із трикрапкою (не заміна .hh-list__meta глобально —
   інші списки цим класом не позначені), а `min-height` резервує ту саму
   висоту й для короткого прев'ю в один рядок: картка розмови завжди
   статичного розміру, незалежно від вмісту. */
.hh-comm-row-preview {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: var(--lh-small); min-height: calc(var(--lh-small) * 2);
}

/* Статус-чіп і лічильник непрочитаних у картці розмови (issue Романа
   14.09.2026) — компактніші за базовий .hh-chip (11px/2px var(--sp-2)),
   бо стоять стовпчиком у вузькій `.hh-comm-row-side` поруч з обрізаним
   прев'ю (hh-comm-row-preview вище), а не поруч із заголовком картки, де
   базовий розмір чіпа й задумано. Лише в цьому списку — інші чіпи статусу
   в системі цей клас не займає. */
.hh-comm-row-status { font-size: 10px; padding: 1px 6px; }

/* Рядок вузької колонки — сіткою (30.09.2026, власник: «чипи статусу
   компактніше, в один рядок із часом, щоб не з'їдали ширину тексту»):
     [аватар] Ім'я · @логін — на всю ширину
              прев'ю — на всю ширину
              пост (лише гілка коментарів)
              [Нова][2][Без відповіді] ............ 13:42
   Обгортки тіла й правої частини розчиняються (display: contents), тож
   ні ім'я, ні прев'ю не ділять ширину зі стовпчиком чипів (сітка рядка
   спільна: будь-який стовпчик праворуч звужував би обидва рядки тексту).
   Той самий рядок і на телефоні (повноекранний список): стовпчик чипів
   праворуч там так само з'їдав ширину імені. `.hh-comm-row` — клас рядка
   розмови (convRowHtml); складений із .hh-list__item селектор (0,2,0)
   перебиває скид `button.hh-list__item` (0,1,1). */
.hh-list__item.hh-comm-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "av title title" "av preview preview" "av post post" "av chips time";
  column-gap: var(--sp-2); row-gap: 2px; align-items: center;
}
.hh-comm-row .hh-list__body, .hh-comm-row .hh-comm-row-side { display: contents; }
/* Висота рядка — ЗАВЖДИ за вмістом (власник, 30.09.2026, iPhone: рядки
   стискались до min-height 60px і налазили один на одного — причина в
   shell.css біля `.hh-comms-embed > :not(.hh-comm-layout)`). Рядок —
   flex-дитина колонки .hh-list; будь-який батько з обмеженою висотою
   стиснув би його знову, тож flex-shrink: 0 і на самому рядку. */
.hh-list__item.hh-comm-row { flex-shrink: 0; }
.hh-comm-row .hh-comm-avatar { grid-area: av; align-self: start; }
/* Ім'я · @логін — до двох рядків, далі «…». Логін без пробілів
   (@oleksandra.maria.veselovska_official) переноситься будь-де, а не
   вилазить праворуч за рядок. */
.hh-comm-row .hh-list__title {
  grid-area: title; min-width: 0;
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hh-comm-row .hh-comm-row-preview { grid-area: preview; min-width: 0; overflow-wrap: anywhere; }
.hh-comm-row .hh-comm-row-post { grid-area: post; }
.hh-comm-row .hh-comm-row-time { grid-area: time; justify-self: end; white-space: nowrap; }
/* Чипи — одним рядком, поки влазять; на 320px «Замовлення · Нова · 3 ·
   Без відповіді» не влазить, і nowrap виводив їх поверх часу й за рядок.
   Перенос лише тоді, коли інакше було б накладання. */
.hh-comm-row .hh-comm-row-chips { grid-area: chips; justify-self: start; min-width: 0; flex-wrap: wrap; row-gap: 2px; }

/* Незалежний скрол самої переписки (issue Романа 13.09.2026, п.1: "блок
   внутрішній з самим чатом має прокурчуватись окремо, не зі всією
   сторінкою... заголовок над чатом залишається. Нижня панель - також
   залишається на екрані"). `.hh-comm-col--thread` стає flex-колонкою з
   РЕАЛЬНОЮ висотою (`height: 100%` — рядок .hh-comm-layout вище точно
   дорівнює доступному в'юпорту, shell.css `.hh-shell:has(.hh-comms-embed)`;
   до 14.09.2026, п.2-3 тут стояв здогад `calc(100vh - 160px)`, який
   лишав зайву висоту й давав докрутити зовнішню сторінку), і лише
   СТРІЧКА ПОВІДОМЛЕНЬ (`.hh-comm-thread-scroll`, `flex:1 1 auto` +
   `min-height:0` — без цього flex-дитина не стискається нижче контенту, і
   скрол ніколи не спрацював би) росте/скролиться, решта (заголовок/дії/
   поле відповіді/панель дій) лишається `flex:none` — фіксованою зверху й
   знизу. НЕ в медіа-запиті (на відміну від .hh-comm-col--list вище) —
   колонка треду ніколи не ховається (на вузькому екрані показана рівно
   вона сама, §13 CLAUDE.md — польовий сценарій гортає лише переписку),
   тож незалежний скрол потрібен на будь-якій ширині. */
.hh-comm-col--thread { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hh-comm-thread-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* БАГ (живий, власник 09.10.2026, iPhone Safari/Chrome, розмова «Нова» з
   чату сайту): на телефоні не видно жодного повідомлення клієнта — лише
   «Розмова» з діями, жовтий «Ви не на зміні» з «Розблокувати введення»,
   поле й підказка. Повідомлення в DOM були (рендер і запит — справні),
   але стрічка мала висоту 0. Причина — рецепт вище: колонка треду має
   рівно висоту вікна, і на вузькому екрані над стрічкою стоїть
   mobile-дубль блоку «Розмова» (+ банер прив'язки), а під нею — замок
   надсилання (756), поле, підказка, «Надіслати» й панель дій. Їхня
   сумарна висота на ~650px видимої області телефона більша за колонку;
   вони не стискаються нижче вмісту, а стрічка (`min-height: 0`) —
   стискається, і віддає їм усе, аж до нуля.
   Фікс — лише для вузького екрана (до того ж брейкпоінта, що ховає праву
   колонку): стрічка не стискається нижче ~третини вікна (і росте, коли є місце),
   а якщо разом із
   блоками вище й нижче не влазить — гортається сама колонка треду (до
   поля відповіді й дій), а переписка й далі скролиться всередині себе.
   На десктопі нічого не змінюється. Тест:
   tests/design-communications-mobile-thread-visible.test.js. */
@media (max-width: 1039.98px) {
  .hh-comm-col--thread { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .hh-comm-thread-scroll {
    flex: 1 1 auto;
    min-height: max(200px, 35vh);
    min-height: max(200px, 35dvh);
  }
}
/* «Нові повідомлення ↓» (власник 07.10.2026) — менеджер гортає історію, а
   прийшло нове: стрічку не смикаємо, плашка сидить над нижнім краєм
   стрічки (від'ємний відступ — сусід .hh-comm-thread-scroll у тій самій
   flex-колонці), клік — до кінця. */
.hh-comm-newbelow {
  flex: none; align-self: center; position: relative; z-index: 2;
  margin: -44px 0 var(--sp-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.hh-comm-daysep { text-align: center; margin: var(--sp-3) 0; font-size: var(--size-small); color: var(--text-muted); }

/* Поле відповіді клієнту (issue Романа 14.09.2026, п.2) — 2 рядки, не 3
   (.hh-textarea за замовчуванням): це проксі-скрол чату, не форма звіту,
   де високе поле виправдане, і зайва висота внизу лише зменшує видиму
   стрічку повідомлень над ним (`.hh-comm-col--thread` тепер жорстко
   обмежена по висоті, п.1 вище). `resize: vertical` з .hh-textarea
   лишається — менеджер може розтягнути на свій розсуд. */
.hh-comm-reply-textarea { min-height: 56px; }
@media (min-width: 768px) {
  .hh-comm-reply-textarea { min-height: 48px; }
}

/* Замок надсилання НА МІСЦІ поля відповіді (власник 09.10.2026: «хай стає
   на місце самого вікна повідомлення») — screen-communications.js
   sendLockInPlaceHtml. Той самий слід, що й поле: повна ширина, рамка й
   радіус поля, висота — рівно два рядки поля (rows=2: шрифт поля × 1.4 × 2
   + поля й рамка, без стрибка, коли розблокували); кольори —
   попередження (.hh-banner--warn). «Розблокувати введення» — текстова
   кнопка в тому ж абзаці, тож плашка тримає два рядки, як і поле. Окремої
   смуги над полем більше немає, тож стрічка повідомлень не втрачає висоти. */
.hh-comm-lockbox {
  width: 100%; box-sizing: border-box;
  min-height: calc(2 * 1.4 * 1rem + 2 * var(--sp-2) + 2 * var(--border-w));
  display: flex; align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--warn-quiet); border: var(--border-w) solid var(--warn-border); border-radius: var(--radius);
  color: var(--text); font-size: var(--size-small); line-height: var(--lh-small);
}
.hh-comm-lockbox__text { margin: 0; min-width: 0; }
.hh-comm-lockbox__btn { font-size: inherit; white-space: nowrap; }
@media (min-width: 768px) {
  .hh-comm-lockbox { min-height: calc(2 * 1.4 * var(--size-body) + 2 * var(--sp-2) + 2 * var(--border-w)); }
}

/* Ряд другорядних дій під полем відповіді — Роман, 14.09.2026: були
   `.hh-btn--sm` (рамка+фон, важко як «Надіслати» поруч), тепер
   `button.hh-link` (screen-communications.js, actionBarHtml) — просто
   підкреслений текст. Відступ між пунктами піднято до `--sp-3`: кнопки
   самі несли візуальну межу (рамку), текстовим лінкам без неї потрібно
   більше повітря між сусідами, інакше зливаються в одне слово. */
.hh-comm-actionbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
/* Неактивний стан (наприклад, «Запросити номер», коли телефон клієнта вже
   відомий) — `button.hh-link` сам не малює жодного тла чи рамки, тому без
   цього правила disabled-кнопка виглядала б ідентично звичайній
   клікабельній: лише тьмяніший колір і знятий курсор/підкреслення кажуть,
   що дія недоступна. */
.hh-comm-actionbar button.hh-link[disabled] {
  color: var(--text-faint);
  text-decoration: none;
  cursor: not-allowed;
}

/* «Прикріпити файл» (власник 09.10.2026, screen-communications.js
   attachActionHtml/attachChipHtml). Два варіанти — тими самими текстовими
   лінками в ряду дій (не окремий блок), вибраний файл — ОДИН рядок над
   полем: на телефоні (≤1040, #3948/#3955) стрічка не втрачає висоти,
   бо чип не вищий за рядок тексту, а прев'ю — мініатюра 28px, не картинка
   на півекрана. Вибір файлу — справжній <input type=file> усередині label
   (доступний з клавіатури й читалки), візуально прихований. */
.hh-comm-attach-menu { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; }
.hh-comm-attach-menu__upload { position: relative; cursor: pointer; }
.hh-comm-attach-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hh-comm-attach-menu__upload:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.hh-comm-attach-chip {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%;
  margin-bottom: var(--sp-1); padding: 2px var(--sp-2);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised); font-size: var(--size-small); line-height: var(--lh-small);
}
.hh-comm-attach-chip__thumb { width: 28px; height: 28px; object-fit: cover; border-radius: var(--radius-sm, 4px); flex: none; }
.hh-comm-attach-chip__icon { flex: none; }
.hh-comm-attach-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.hh-comm-attach-chip__size { flex: none; color: var(--text-muted); white-space: nowrap; }
.hh-comm-attach-chip__remove {
  flex: none; border: none; background: none; cursor: pointer; color: var(--text-muted);
  font: inherit; padding: 2px var(--sp-1); min-width: 28px; min-height: 28px;
}
.hh-comm-attach-chip__remove:hover { color: var(--danger); }

/* Банер зіставлення гостя з клієнтом (§5) — приглушений «інфо» фон, той
   самий токен, що .hh-chip--info вище: пропозиція, не помилка й не
   попередження. */
.hh-comm-match-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  border-radius: var(--radius); background: var(--info-quiet); border: var(--border-w) solid var(--info-border);
}

/* Картка товару як окреме повідомлення (§3/§9) — панель «Товар» (паралельна
   робота) надсилає пакет фото+сітка+лінк одним повідомленням; рендер тут
   захисний (message.kind==='product_bundle' або message.payload з тим самим
   набором полів) — форма ще не остаточна, документована в screen-
   communications.js біля productBundleHtml(). */
.hh-comm-product-card {
  border: var(--border-w) solid var(--border); border-radius: var(--radius);
  padding: var(--sp-2); margin-bottom: var(--sp-2); max-width: 78%; background: var(--surface-raised);
}
.hh-comm-product-card__photos { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.hh-comm-product-card__photos img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }

/* Фото як РЕАЛЬНЕ зображення в стрічці переписки (403.sql
   attachment_media_id, issue Романа 13.09.2026, п.5) — сама картинка, не
   картка-пакет (.hh-comm-product-card вище лишається для протокольного
   product_bundle, окремий формат). */
.hh-comm-msg-photo {
  display: block; max-width: 220px; max-height: 220px; width: 100%; height: auto;
  object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 4px;
}

/* Вкладення Meta в бульбашці (648, screen-communications.js
   messageAttachmentsHtml): фото/відео/голосові/стікери/перешлені дописи.
   Альбом — стрічкою з переносом; на телефоні мініатюра не ширша за
   бульбашку (max-width:100%), тап відкриває повний розмір. */
.hh-comm-att {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: 4px; max-width: 100%;
}
.hh-comm-att__item { display: flex; flex-direction: column; gap: 2px; max-width: 100%; min-width: 0; }
.hh-comm-att__media { display: block; line-height: 0; max-width: 100%; }
.hh-comm-att__img {
  display: block; width: auto; max-width: min(220px, 100%); max-height: 220px; height: auto;
  object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken);
}
.hh-comm-att__sticker { display: block; width: 96px; height: 96px; object-fit: contain; }
.hh-comm-att__video {
  display: block; width: 240px; max-width: 100%; max-height: 320px;
  border-radius: var(--radius-sm); background: var(--surface-sunken);
}
.hh-comm-att__audio { display: block; width: 240px; max-width: 100%; }
.hh-comm-att__file,
.hh-comm-att__card {
  display: flex; flex-direction: column; gap: 2px; max-width: 240px; min-width: 0;
  padding: var(--sp-1) var(--sp-2); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  color: inherit; text-decoration: none; font-size: var(--size-small); line-height: var(--lh-small);
  overflow-wrap: anywhere;
}
.hh-comm-att__card-kind { font-size: var(--size-caption); color: var(--text-muted); }
.hh-comm-att__card-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hh-comm-att__card-open { color: var(--accent); }
.hh-comm-att__caption { font-size: var(--size-caption); color: var(--text-muted); }
.hh-comm-att__missing {
  font-size: var(--size-small); line-height: var(--lh-small); color: var(--text-faint); font-style: italic;
}

/* «Останні переглянуті товари» в контекстній панелі «Комунікацій»
   (screen-communications.js recentlyViewedHtml): сітка плиток фото + назва
   + коли. Три колонки й на телефоні, і в панелі десктопа (вона вузька). */
.hh-comm-viewed {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2);
}
.hh-comm-viewed__item {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  color: inherit; text-decoration: none;
}
.hh-comm-viewed__img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--surface-sunken);
}
.hh-comm-viewed__name {
  font-size: var(--size-caption); line-height: var(--lh-small);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hh-comm-viewed__when { font-size: var(--size-caption); color: var(--text-faint); }

/* Горизонтальна стрічка фото в панелі «Товар» (§3, issue Романа
   13.09.2026, п.6: "вибір картинок — горизонтальний, не вертикальний, без
   підпису... якщо багато картинок — прокрутка вертикальна" — Роман мав на
   увазі "не вертикальний список", сам скрол стрічки — горизонтальний, той
   самий рецепт `flex-wrap:nowrap; overflow-x:auto`, що вже
   .hh-docs-filterbar вище). Кожен тайл — `label`, що обгортає checkbox +
   мініатюру: клік будь-де на тайлі перемикає вибір, той самий приступний
   патерн, що чекбокс-рядки деінде в CORE. Позначене фото отримує рамку
   акценту через `[data-checked]`, а не через сам факт `:checked` на
   вкладеному інпуті — приховану input-рамку браузер все одно не малює
   навколо `label`. */
.hh-comm-ppanel-photos {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.hh-comm-ppanel-photo {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: var(--radius-sm);
  overflow: hidden; border: var(--border-w) solid var(--border); cursor: pointer;
}
.hh-comm-ppanel-photo[data-checked] { border-color: var(--accent); border-width: 2px; }
.hh-comm-ppanel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-comm-ppanel-photo input[type="checkbox"] { position: absolute; top: 4px; left: 4px; margin: 0; }

/* Контекстна панель клієнта (§9) — блоки одним стеком, той самий відступ,
   що картки в решті CORE. */
.hh-comm-context .hh-card + .hh-card { margin-top: var(--sp-3); }
.hh-comm-recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: var(--sp-2); }
.hh-comm-recent-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }

/* Попап «Товар» (редизайн 14.09.2026, п.5) — плаваюча перетяжна картка,
   НЕ звичайна модалка CORE (.hh-overlay/.hh-modal вище): жодного
   затемненого backdrop — уся суть перетяжності в тому, щоб відсунути
   попап і бачити стрічку переписки позаду, суцільна підкладка це б
   унеможливила. Дефолтна позиція — прикріплена знизу-справа над панеллю
   дій, той самий відступ, що вже .hh-comm-actionbar; після першого драгу
   JS (mount(), dragPPanelModal) перемикає left/top інлайновим style,
   right/bottom стають auto (script вище). */
.hh-comm-ppanel-modal {
  position: fixed; right: var(--sp-4); bottom: 96px;
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
  max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: var(--surface-raised); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  z-index: var(--z-modal);
}
.hh-comm-ppanel-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: var(--border-w) solid var(--border-faint);
  cursor: move; flex: none;
}
.hh-comm-ppanel-modal__body { padding: var(--sp-3); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* Телефон — драг мишею тут неважливий (§13 CLAUDE.md: сенсорний скрол,
   не миша), попап лишається на місці внизу екрана на всю ширину. */
@media (max-width: 767px) {
  .hh-comm-ppanel-modal { left: var(--sp-3); right: var(--sp-3); width: auto; bottom: var(--sp-3); }
}

/* Попап «Замовлення» (issue Романа 14.09.2026, живий скрін «Показати
   замовлення» ламало висоту колонки треду) — ТОЙ САМИЙ `.hh-comm-ppanel-
   modal`, що «Товар» вище (плаваюча картка, position:fixed, поза потоком
   колонки), лише інша дефолтна позиція (вище й лівіше): обидва попапи
   можна відкрити одночасно (кнопки стоять поруч в actionBarHtml), і без
   цього зсуву другий ліг би рівно на перший рівно в той самий кут. На
   вузькому екрані той самий рядок @media вище перекриває обидва в один
   і той самий повноширинний блок знизу — це прийнятно, бо на телефоні
   відкривають один попап за раз (§13 CLAUDE.md, польовий сценарій). */
.hh-comm-ppanel-modal--order { right: calc(var(--sp-4) + 24px); bottom: 160px; }
.hh-checklist__item--warn { color: var(--warn); }

/* «Пріоритет джерел» (issue #756/#960 §2.4) — нумерований список кроків
   ланцюжка (sourcingChainHtml, design/screen-orders.js). */
.hh-sourcing-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--size-small); }

.hh-state-track { display: flex; flex-direction: column; }
.hh-state-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
  font-size: var(--size-small);
  color: var(--text-faint);
}
.hh-state-item--done { color: var(--text); }
.hh-state-item--current { color: var(--text); font-weight: var(--weight-bold); }
.hh-state-dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--surface-sunken); border: 2px solid var(--border); flex: none; }
.hh-state-item--done .hh-state-dot { background: var(--ok); border-color: var(--ok); }
.hh-state-item--current .hh-state-dot { background: var(--brand-chocolate); border-color: var(--brand-chocolate); }
/* Шкала етапів замовлення (власник 30.09.2026) — ОДИН рядок під статусом,
   етапи через стрілку; на телефоні переноситься, за екран не вилазить.
   Лише пройдені + поточний + наступний (d.status_track із сервера). */
.hh-state-track--inline {
  flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 2px var(--sp-2); margin: var(--sp-2) 0 0; padding: 0; list-style: none;
}
.hh-state-track--inline .hh-state-item { padding: 2px 0; }
.hh-state-track--inline .hh-state-item + .hh-state-item::before {
  content: "→"; color: var(--text-faint); font-weight: var(--weight-regular); margin-right: var(--sp-1);
}
.hh-state-item--next { color: var(--text-faint); }
/* Під рядком статусу картки — щільніше: рядок статусу вже має нижній відступ. */
.hh-status-line + .hh-state-track--inline { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }

.hh-order-summary__row--total {
  display: flex;
  justify-content: space-between;
  border-top: var(--border-w) solid var(--border);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  font-weight: var(--weight-bold);
  font-size: var(--size-h3);
}

/* .hh-paybox прибрано (issue #961 §11.1) — третій, лише для читання, вид
   термінів оплати в картці "Сума"; терміни лишаються ЄДИНИМ редагованим
   місцем у шапці форми (orderHeader), правило "рівно два місця, не три". */

.hh-input--sm { min-height: 32px; padding: var(--sp-1) var(--sp-2); font-size: var(--size-small); width: auto; }
/* Малий список (.hh-select.hh-input--sm) — правило вище перебиває
   padding-right з .hh-select (той самий вага, пізніше в файлі), і текст
   налазив на стрілку. Колишній .hh-select--sm (без стилю, 01.10.2026)
   зведено сюди ж. */
.hh-select.hh-input--sm { padding-right: var(--sp-6); }

/* Панель керування демо (.d-bar) ховалась тут одним CSS-правилом
   (`html:not(.hh-dev) .d-bar`) — свідомо, замість `demoBar.hidden = true`
   за 786 рядків від початку скрипта оболонки, щоб збій скрипта падав у
   закритий бік, а не лишав службове видимим назавжди.

   Прибрано 14.09.2026 (живий звіт Романа): те саме правило в ЗОВНІШНЬОМУ
   файлі виявилось крихким по-іншому — `?v=`-кеш-бастинг стилів
   (forceAppReload у shell.html) переписує href усіх `<link
   rel="stylesheet">` на нове довантаження, і доки components.css не
   долетить ЗНОВУ, це правило ще не діє, а `.d-bar{display:flex}` з
   інлайнового <style> сторінки — уже діє. Голу панель було видно
   секунду-дві на кожному F5/переході, у якого в адресі колись з'явився
   `?v=` (а він звідти сам не зникає).

   Видимість тепер — атрибут `hidden` прямо в розмітці кожної сторінки
   (shell.html, login.html) плюс синхронний скрипт одразу після панелі, що
   знімає `hidden`, коли `window.HH_DEV`. Той самий принцип «фейл у закритий
   бік», але без залежності від зовнішнього файлу. */

/* --------------------------------------------------------------------------
   ПОЛОТНО КОЛЕКЦІЇ (issue #278) — дві зони (Флагмани/Доповнення),
   перетягування товару з бічної панелі «Каталог» і всередині зон.
   -------------------------------------------------------------------------- */
.hh-canvas-zone {
  border: var(--border-w) dashed var(--border-faint);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  min-height: 96px;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
/* Уся зона — ціль дропу (issue: «10 разів в спец точку попасти»,
   Роман 23.08), не лише вузька смужка контейнера навколо карток —
   тому й підсвітка на всю зону, а не тільки на картку під курсором. */
.hh-canvas-zone--over {
  border-style: solid;
  border-color: var(--accent);
  background: var(--surface-hover);
}
.hh-canvas-zone__empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; color: var(--text-muted); font-size: var(--size-small);
  text-align: center;
}
.hh-canvas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-2);
}
/* «Товари колекції» на сторінці колекції (issue coordinator, 25.08.2026,
   живий фідбек Романа — плитки поруч мали виглядати як у вітринному
   перегляді «Всі колекції», а не дрібніше): той самий розмір колонки, що
   .hh-tiles (screen-products.js, вітринна сітка каталогу), а не нове
   число. Модифікатор, не заміна базового .hh-canvas-grid — той самий клас
   і далі малює меншу сітку каталогу-пікера в бічній панелі додавання
   (catalogPanelBlock), яку тут ніхто не просив збільшувати. */
.hh-canvas-grid--items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 768px) {
  .hh-canvas-grid--items { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
/* «Малі піктограми» (issue #567) — приблизно вдвічі менші колонки за
   .hh-canvas-grid--items вище, той самий модифікатор-принцип (не заміна
   базового класу — обидва додаються разом на сітці, canvasZone()). Саме
   фото додатково зменшене класом .hh-canvas-shot--sm нижче (менший max-
   width усередині клітинки колонки), інакше widescreen-колонка й так
   розтягнула б .hh-shot на всю ширину клітинки, звівши "малі" нанівець. */
.hh-canvas-grid--items-sm { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
@media (min-width: 768px) {
  .hh-canvas-grid--items-sm { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
}
.hh-caption--sm { font-size: 11px; }
.hh-canvas-card {
  position: relative;
  background: var(--surface);
  border: var(--border-w) solid var(--border-faint);
  border-radius: var(--radius-md);
  padding: 6px;
  cursor: grab;
}
.hh-canvas-card--dim { opacity: 0.45; cursor: default; }
.hh-canvas-catalog { max-height: 60vh; overflow-y: auto; }
/* issue #468 — клік на назву товару в банері «не на полотні»
   (screen-collections.js unattachedBannerHtml()/pendingCatalogHighlight)
   підсвічує саме цю картку каталогу нижче на кілька секунд, щоб куратор
   не шукав її навмання серед сорока карток. Клас додається/знімається
   через JS (setTimeout), не через стан рендеру — тут лише вигляд. */
.hh-jump-highlight {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  transition: box-shadow 0.2s ease, outline-color 0.2s ease;
}
/* Гуртове додавання (issue #348) — чекбокс поверх картки каталогу, той
   самий кут, що кнопка «прибрати» на картці полотна (top:4px), лише
   зліва: обидва можуть бути присутні одночасно на різних картках без
   перекриття. */
.hh-canvas-card__select {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: 0 0 0 1px var(--border-faint);
  cursor: pointer;
}
.hh-canvas-card__select input { margin: 0; cursor: pointer; }
/* Панель гуртового додавання (issue #382, візуальний баг знайдено 24.08 —
   Роман не бачив перемикач «Об'єднані у Style»/«Товари окремо» на
   скріншоті): `.hh-canvas-catalog` — власний скрол-контейнер
   (max-height:60vh; overflow-y:auto), а catalogSelectionBar() рендерилась
   ПІСЛЯ сітки каталогу (до 40 карток, issue #348) — щоб її побачити,
   треба було проскролити повз усі картки ВСЕРЕДИНІ цієї внутрішньої
   панелі. Не "не рендериться" — рендериться коректно (лише коли позначено
   хоч один товар), але фізично за межами видимої області без скролу.
   `position: sticky; bottom: 0` тримає її на дні видимої частини панелі
   незалежно від скролу — той самий скрол-контейнер, тому sticky спрацьовує
   без додаткової розмітки. */
.hh-catalog-selection-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--surface);
}
/* Виділення мишкою (rubber-band, issue #382) — прямокутник поверх сітки
   каталогу під час mousedown→mousemove. position:fixed у viewport-
   координатах (bindCatalogRubberBand(), screen-collections.js): оверлей
   живе в document.body лише на час одного жесту, не всередині сітки, тому
   не потребує зміни position спільного .hh-canvas-grid (той самий клас
   рендерить і полотно товарів вище, і каталог товарів screen-products.js
   — займати його ризиковано). pointer-events:none — оверлей не має
   перехоплювати mouseup/mousemove від слухачів document. */
.hh-catalog-rubber-band {
  position: fixed;
  border: var(--border-w) dashed var(--accent);
  background: var(--accent-quiet);
  pointer-events: none;
  z-index: 50;
}
.hh-cover-trigger:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.hh-inline-edit { cursor: text; border-radius: var(--radius-sm); }
.hh-inline-edit:hover { background: var(--surface-hover); }

/* --------------------------------------------------------------------------
   Реєстр торгових документів (design/trade-documents-registry.js, issue #898)

   Спирається на .hh-table/.hh-chip/.hh-select вище — тут лише те, чого
   бракує: три статус-колонки впритул (4.4 інструкції — економія ширини,
   таблиця має вміщатись поруч із бічним меню без горизонтального скролу),
   позначка повернення (іконка + смуга, 4.7), каскадний фільтр каналу в
   один рядок хлібними крихтами (4.11), і розмітка розкриття документа
   (4.5–4.9) поверх .hh-table__detail-row (той самий рецепт, що вже
   screen-mkt-today.js).
   -------------------------------------------------------------------------- */

/* Три статус-колонки впритул одна до одної — замість звичайного padding
   комірки, зовнішні (Статус замовлення) padding-right і (Статус доставки)
   padding-left стискаються до нуля, чіпи в середній колонці отримують
   від'ємний margin, що заміняє decorative-проміжок на майже дотичні краї,
   без урізання самого чипа (padding усередині чипа лишається). */
.hh-docs-status-group td { padding-left: var(--sp-1); padding-right: var(--sp-1); }
.hh-docs-status-group td:first-child { padding-left: var(--sp-3); }
.hh-docs-status-group td:last-child { padding-right: var(--sp-3); }

/* Щільність за docs/design-code-core.md §2-3 (issue #916/#917): td 9px
   вертикально/12.5px текст, th 9px/10px UPPERCASE. Спільний .hh-table
   (~L1140) несе var(--sp-3)=12px усюди й var(--size-caption)=12px для th —
   уже досить компактно для порталу загалом (issue #714/#729 звели його до
   ОДНОГО стандарту, чіпати global не можна), але Роман звірив САМЕ ЦЕЙ
   реєстр iз точними числами документа — тому невеликий скоуп-нюанс тут,
   той самий прийом, що .hh-docs-timebar вище (не портальна правка). */
.hh-docs-status-group td { padding-top: 9px; padding-bottom: 9px; font-size: 12.5px; }
.hh-docs-status-group thead th { padding-top: 9px; padding-bottom: 9px; font-size: 10px; }

/* Сума обрізалась справа (Документ 2 §3, issue #916/#917) — .hh-table-wrap
   (~L1130, спільний для ~15 таблиць порталу) до 29.09.2026 ніс overflow:hidden (тепер overflow-x: auto — див. сам клас), тому
   коли зміст таблиці ширший за контейнер, зайве просто ЗНИКАЄ (не
   скролиться) — саме так "Сума" губилась праворуч ("1 665,0…", "2 7…").
   Власний клас на обгортці (renderTable(), hh-docs-table-wrap) — не
   зміна спільного .hh-table-wrap: дозволяє горизонтальний скрол лише тут,
   як запасний варіант, коли звужені ліві колонки нижче все одно не
   вміщаються (вузький екран, довге ім'я клієнта). */
.hh-docs-table-wrap { overflow-x: auto; overflow-y: hidden; }

/* Таблиця терміналів «Фіскалізація» (design/screen-fiscalization.js,
   18.09.2026, після #2641). Дві колонки, ширину кожній дає вміст
   (table-layout: auto): «Канал» — під назву каналу (nowrap, до 200px),
   «Термінал» — увесь лишок (width: 100%; max-width: 0 дозволяє
   обрізати рядок 2 трикрапкою, а не розпирати таблицю). У клітинці
   терміналу — рівно два рядки тексту фіксованої висоти: постійна висота
   рядка таблиці (docs/01-rules/instruction-design-scale.md §4/§7.4) —
   однакові два рядки на кожному терміналі. Назва терміналу ніколи не
   обрізається (flex: none) — обрізається лише приглушений рядок 2, з
   повним значенням у title і в розкритті. Телефон — картки
   (.hh-table--responsive), обрізання знімається. */
.hh-fisc-table { table-layout: auto; width: 100%; }
.hh-fisc-table td.hh-fisc-main { width: 100%; max-width: 0; }
.hh-fisc-table td.hh-fisc-chan { white-space: nowrap; }
.hh-fisc-table .hh-table__detail-row td { white-space: normal; overflow: visible; }
.hh-fisc-clip {
  display: inline-block; max-width: 200px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Рядок 1 переноситься, а не обрізається (рев'ю 19.09.2026): на ~900px
   «Закрити зміну» ховалась за overflow: hidden. Коли назва, чипи й кнопка
   вміщаються — рядок той самий 22px; коли ні — кнопка падає нижче цілою. */
.hh-fisc-line1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-height: 22px;
  white-space: nowrap;
}
.hh-fisc-line1 > * { flex: none; }
.hh-fisc-name { cursor: pointer; white-space: nowrap; }
/* Рядок 2 — три шматки: до логіна, логін (flex: none — видно завжди
   цілим), після логіна. Обрізаються трикрапкою лише крайні, хвіст першим. */
.hh-fisc-line2 {
  display: flex; min-width: 0;
  height: 17px; line-height: 17px; margin-top: 1px;
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-fisc-line2__lead, .hh-fisc-line2__tail {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre;
}
.hh-fisc-line2__lead { flex: 0 1 auto; }
.hh-fisc-line2__tail { flex: 0 1000 auto; }
.hh-fisc-line2__login { flex: none; white-space: nowrap; }
.hh-fisc-line2 .hh-code { font-size: 11px; }
.hh-fisc-sep { color: var(--text-faint); padding: 0 1px; }
/* «Закрити зміну» в рядку — розміру btn-mini (instruction-design-scale.md
   §5) лише на десктопі: 32px кнопка робила б рядок з відкритою зміною
   вищим за сусідні (§4, постійна висота). На телефоні лишається ціль
   дотику. */
@media (min-width: 768px) {
  .hh-fisc-row-btn { min-height: 20px; height: 20px; padding: 0 9px; font-size: 11px; }
}
/* Розкриття: кнопки першим рядком під рядком терміналу, далі сітка фактів,
   де значення стоїть одразу за підписом, а не через усю ширину. */
.hh-fisc-detail { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.hh-fisc-detail__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hh-fisc-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-1) var(--sp-5);
}
.hh-fisc-fact { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; padding: 3px 0; }
.hh-fisc-fact__k { flex: none; color: var(--text-muted); font-size: var(--size-small); }
.hh-fisc-fact__v { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .hh-fisc-table td.hh-fisc-main { width: 100%; max-width: none; }
  .hh-fisc-line1 { flex-wrap: wrap; height: auto; white-space: normal; }
  .hh-fisc-line2 { flex-wrap: wrap; height: auto; white-space: normal; overflow: visible; }
  .hh-fisc-line2__lead, .hh-fisc-line2__tail { overflow: visible; white-space: normal; }
  .hh-fisc-clip { max-width: none; overflow: visible; white-space: normal; }
}
/* Звужені ліві колонки — "Клієнт" найдовша й найменш важлива для першого
   погляду (Документ 2 §3: "особливо Клієнт"), "Документ" стиснутий трохи
   менше (номер документа має лишитись читабельним в один рядок, §2/§3
   документа — постійна висота рядка). "Сума" — зарезервована мінімальна
   ширина під 6+ цифр із копійками ("123 456,00 ₴"), завжди праворуч
   (успадковано з .hh-td--num). */
/* 260px, не 220: «Замовлення CO-2026-000075» (власний номер CORE, ~196px)
   разом із кнопкою розкриття в 220 не влазив і обрізався (01.10.2026). */
.hh-docs-cell--doc { max-width: 260px; }
.hh-docs-cell--doc .hh-doc-type span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Клієнт» переноситься, а не обрізається «…» (власник, 01.10.2026:
   «Гості концерту Хор …» — ім'я не прочитати, а підказки в title на
   телефоні не існує). Ширина та сама — довге ім'я стає двома рядками;
   слово довше за колонку рветься (break-word), а не розпирає таблицю. */
.hh-docs-cell--client { max-width: 150px; white-space: normal; overflow-wrap: break-word; }
/* Телефон клієнта під іменем (03.10.2026) — окремим рядком, одним шматком
   (номер, розірваний посередині, не прочитати й не скопіювати). */
.hh-docs-client-phone { display: block; font-size: var(--size-caption); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh-docs-cell--amount { min-width: 100px; }

/* Статус-чипи (Замовлення/Оплата/Доставка) на ДЕСКТОПІ — docs/design-code-
   core.md §5.5: padding 3px 9px, розмір 10.5px, невелика пігулка. Живий
   скріншот "Усі продажі" (issue #916/#917, Роман) показав, що ці три
   колонки успадковували лише базовий .hh-chip (padding 2px 8px, 11px,
   components.css ~L970) — той самий розмір, що чипи-факти деінде на
   порталі — і саме він розтягував висоту рядка понад задумані ~35-36px
   §3. Скоуп навмисно лише на ці три td-класи (не на всі .hh-chip
   компонента: канал-чип і статус-чип у розкритті рядка лишаються на
   портальному розмірі) і лише ≥768px — на телефоні (max-width:767px
   нижче в цьому ж файлі) чипи й так уже стиснуті до 10px/1px, той
   мобільне правило первинне й не повинно програвати цьому за
   специфічністю. */
@media (min-width: 768px) {
  .hh-docs-status-group .hh-docs-cell--status-order .hh-chip,
  .hh-docs-status-group .hh-docs-cell--status-payment .hh-chip,
  .hh-docs-status-group .hh-docs-cell--status-delivery .hh-chip {
    padding: 3px 9px;
    font-size: 10.5px;
    line-height: 1.3;
    min-height: 0;
  }
}

/* Компактні чипи реєстру торгових документів (запит власника 26.09.2026:
   «чипи високі, розтягують рядки»). Кожен чип рядка й розкриття — статус,
   оплата, доставка, канал, X-партнер, «Фіскалізовано» — несе наявний
   модифікатор .hh-chip--sm, а тут, лише в межах цієї таблиці
   (.hh-tdr-table, trade-documents-registry.js), йому задано висоту 16px:
   рядок тексту 14px без внутрішнього вертикального padding. Шрифт
   лишається 10.5px — розмір статус-чипа дизайн-коду (instruction-design-
   scale.md §5/§7.5); стискається лише повітря навколо тексту, не текст.
   Глобальний .hh-chip--sm не змінюється — ним користуються інші екрани.
   Лише десктоп: мобільна картка (нижче в цьому файлі) має власний, уже
   стиснутий розмір чипів статусу. */
@media (min-width: 768px) {
  .hh-tdr-table .hh-chip--sm,
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-order .hh-chip,
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-payment .hh-chip,
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-delivery .hh-chip {
    padding: 0 7px;
    font-size: 10.5px;
    line-height: 14px;
    min-height: 0;
    white-space: nowrap;
  }
}
/* Клітинка «Оплата» з двома чипами (оплата + «Фіскалізовано») — щільний
   стовпчик із проміжком 2px; вертикальний padding клітинки зменшено, щоб
   два чипи (16 + 2 + 16 = 34px) вкладались у висоту звичайного рядка
   (~36px, §4 дизайн-коду), а не розтягували його. */
.hh-docs-paystack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
@media (min-width: 768px) {
  .hh-tdr-table td.hh-docs-cell--status-payment:has(.hh-docs-paystack) { padding-top: 1px; padding-bottom: 1px; }
}
@media (max-width: 767px) {
  .hh-docs-paystack { align-items: stretch; }
}

/* Рядок-пояснення під чипом «Оплата» (28.09.2026, paymentCellHtml,
   trade-documents-registry.js): спосіб і сума кожного джерела покриття —
   «Накладний · 940,00 ₴», «Картка · …». Приглушений текст без рамки: це
   підпис до чипа, не другий статус. Накладений, що не надійшов, —
   попередження кольором warn (той самий токен, що .hh-chip--warn); якщо
   покриття немає, він стоїть у клітинці сам, без чипа (issue #925).
   Переноситься, а не тримається одним рядком (регресія 29.09.2026,
   власник: «табличка перестала влазити»): nowrap робив мінімальну ширину
   колонки «Оплата» рівною найдовшому підпису — «ТОВ … · 12 580,00 ₴»
   агента чи «Накладний · 13 200,00 ₴ · не надійшов» — ~300px, і таблиця
   з восьми колонок на 1440px виходила за картку, «Сума» зрізалась.
   Сума всередині не рветься сама: money() ставить нерозривні пробіли. */
.hh-docs-pay-src { display: block; font-size: 11px; color: var(--text-muted); white-space: normal; line-height: 1.3; }
.hh-docs-pay-src--warn { color: var(--warn); font-weight: var(--weight-medium); }
/* Доставка в рядку реєстру (06.10.2026, deliveryTtnCellHtml,
   trade-documents-registry.js): чип статусу, під ним хвіст ТТН і «+N»,
   при наведенні — підказка з деталями. position: fixed — обгортка таблиці
   (.hh-docs-table-wrap) ріже overflow, абсолютна підказка нижніх рядків
   зникала б; координати ставить bind() від клітинки. На телефоні наведення
   немає — ті самі деталі в розкритті рядка (deliveryFullLineHtml). */
.hh-docs-dlv { position: relative; cursor: default; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hh-docs-dlv__tip {
  display: none; position: fixed; z-index: var(--z-suggest); width: max-content; max-width: 320px;
  padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised); box-shadow: var(--shadow-raised);
  font-size: 12px; line-height: 1.4; white-space: normal; text-align: left;
}
.hh-docs-dlv__tip-row { display: block; }
.hh-docs-dlv__ttn { display: inline; }
.hh-docs-dlv__line { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hh-docs-dlv__doc { display: inline; }
/* Позначка 1С біля видаткової в «Доставці» (06.10.2026): звичайна — документ
   є в 1С; перекреслена — видаткову ще не записано (shipment-onec-unwritten). */
.hh-docs-onec {
  display: inline-block; padding: 0 3px; border: var(--border-w) solid var(--border-strong); border-radius: 3px;
  font-size: 10px; line-height: 14px; font-weight: var(--weight-medium); color: var(--text-muted); vertical-align: middle;
}
/* 07.10.2026: колір — стан у 1С (зелений проведено, жовтий записано не
   проведено, червоний перекреслений — немає). Токени ті самі, що в чипів. */
.hh-docs-onec--posted { color: var(--ok); border-color: currentColor; }
a.hh-docs-onec { cursor: pointer; }
a.hh-docs-onec:not(.hh-docs-onec--missing) { text-decoration: none; }
a.hh-docs-onec:hover { background: var(--surface-hover); }
.hh-docs-onec--unposted { color: var(--warn); border-color: currentColor; }
.hh-docs-onec--missing { color: var(--danger); border-color: currentColor; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.hh-docs-dlv__line .hh-chip { flex: 0 0 auto; }
@media (hover: hover) {
  .hh-docs-dlv:hover .hh-docs-dlv__tip, .hh-docs-dlv:focus .hh-docs-dlv__tip { display: block; }
}
/* Бейдж стану джерела («очікує», «не підтв.», «не надійшов») — компактний
   реєстр, 02.10.2026: замінив довге «· очікує зарахування». Не переноситься
   всередині себе; повний текст — у title рядка. */
.hh-docs-pay-state {
  display: inline-block; white-space: nowrap; font-size: 10px; line-height: 1.2;
  padding: 0 var(--sp-1); border-radius: 999px; vertical-align: baseline;
  background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn);
}
/* «Немає даних про оплату» на десктопі теж переноситься: компактні чипи
   рядка вище тримають nowrap (їхні підписи — одне-два слова), а цей —
   чотири слова й ~150px, удвічі ширший за колишнє «—». Одним рядком він
   сам задавав мінімальну ширину колонки «Оплата» (та сама регресія
   29.09.2026). Селектор тієї ж специфічності, що правило nowrap, і
   нижче за нього — тому перемагає без !important. */
@media (min-width: 768px) {
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-payment .hh-chip--nodata { white-space: normal; }
}
/* ЖОДНА КЛІТИНКА РЕЄСТРУ НЕ РОЗПИРАЄ ТАБЛИЦЮ (власник, 29.09.2026,
   повторно — після «Оплати» вилетіла «Доставка»: чип ніс повний сирий
   статус НП одним рядком, ~440px). Підпис доставки тепер короткий
   (HH_SALES.deliveryStatusShort), а це — страховка на випадок, коли
   текст усе ж довший за колонку: чип доставки, статусу замовлення й
   X-партнера в «Каналі» переноситься (white-space: normal) і, в
   крайньому разі, рветься посеред слова (overflow-wrap: anywhere).
   Автоматична розкладка таблиці бере для колонки повну ширину тексту,
   поки місця досить, — тож рядок стає вищим лише тоді, коли інакше
   таблиця вийшла б за картку. Канал-чип (.hh-chip--clamp) уже обмежений
   148px з «…», «Клієнт» і «Документ» — max-width з «…», «Сума» свідомо
   одним рядком (сума не рветься), але вона обмежена самим форматом.
   Селектори тієї ж специфічності, що nowrap компактних чипів вище, і
   нижче за нього — тому перемагають без !important. */
@media (min-width: 768px) {
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-order .hh-chip,
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-delivery .hh-chip { white-space: normal; overflow-wrap: anywhere; }
  /* «Канал» (01.10.2026): жоден чип клітинки — ні канал, ні «Подія: …»,
     ні «X: партнер» — не обрізається «…»; довгий підпис переноситься
     в межах 180px по словах. break-word, не anywhere: назва події —
     звичайні слова, рвати їх посеред слова без потреби не треба. */
  /* radius-sm — двохрядкова «пігулка» з radius-full читалась краплею. */
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--channel .hh-chip { white-space: normal; overflow-wrap: break-word; max-width: 180px; border-radius: var(--radius-sm); }
}

/* РЕЄСТР У ВУЗЬКІЙ ПАНЕЛІ — ЗА ШИРИНОЮ СВОГО МІСЦЯ, НЕ ВІКНА (власник,
   скрін 04.10.2026, картка контрагента «ФОП Хмара Тетяна Романівна»:
   «наче прийшов неадаптований компонент»). Правила вище (перенос «Клієнта»
   й «Каналу», #3296 01.10.2026; перенос «Немає даних про оплату»,
   29.09.2026) написані під «Усі продажі» на всю ширину сторінки (~1100px):
   там перенос вмикається лише як страховка. Картка контрагента ставить той
   самий реєстр у ліву колонку поруч із правою 320px — на 1440px це ~790px,
   і автоматична розкладка стискала кожну колонку до найдовшого СЛОВА:
   ім'я в чотири рядки, «hygge-/hoodie.com», «Немає даних про оплату» у
   три, а таблиця однаково була ширша за панель і «Доставка»/«Сума»
   ховались за край.
   Тому обгортка таблиці — контейнер (.hh-tdr-wrap, renderTable), і в
   контейнері ≤ 1000px (лише від 768px вікна: на телефоні рядок —
   картка-сітка з власними правилами нижче) рядок стає компактним:
     • чипи — одним рядком; канал і статуси, що не вміщаються, — «…»
       (повна назва каналу — у title і в розкритті рядка);
     • «Немає даних про оплату» → «Немає даних» (колонка й так «Оплата»);
     • підписи джерел оплати — одним рядком із «…»;
     • «Клієнт», коли колонка є (вузька вирізка без entityColumn), — до
       двох рядків, далі «…»;
     • горизонтальні відступи клітинок 8px замість 12px.
   Ширина колонок задається максимальною шириною самих чипів, не td:
   max-width на клітинці таблиці браузер ігнорує.
   Широкий реєстр (> 1000px) — без змін. Сторож —
   tests/design-trade-documents-registry-narrow-panel.test.js. */
.hh-tdr-wrap { container: hh-tdr / inline-size; }
.hh-nodata-short { display: none; }
/* Номер документа — частина того самого рядка, що й тип («Замовлення
   CO-2026-000075»), і на телефоні теж: правило мобільної картки
   «.hh-doc-type span:last-child { display: block }» адресоване обгортці
   назви, а не номеру всередині <b>. Специфічність вища за нього. */
.hh-docs-cell--doc .hh-doc-type span.hh-docs-docnum:last-child { display: inline; }
@media (min-width: 768px) {
  @container hh-tdr (max-width: 1000px) {
    .hh-docs-status-group.hh-tdr-table th,
    .hh-docs-status-group.hh-tdr-table td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--channel .hh-chip,
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-order .hh-chip,
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-payment .hh-chip,
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-delivery .hh-chip {
      display: inline-block; vertical-align: middle;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
      border-radius: var(--radius-full);
    }
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--channel .hh-chip { max-width: 120px; }
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-order .hh-chip,
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-payment .hh-chip,
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-delivery .hh-chip { max-width: 104px; }
    /* «Замовлення» / «CO-2026-000075» — двома рядками: номер одним шматком
       під типом, а не обидва в один рядок ~250px. */
    .hh-tdr-table .hh-docs-cell--doc .hh-doc-type > span:last-child { white-space: normal; line-height: 1.3; }
    .hh-tdr-table .hh-docs-cell--doc .hh-doc-type span.hh-docs-docnum:last-child { display: block; white-space: nowrap; }
    .hh-tdr-table .hh-docs-cell--amount { min-width: 84px; }
    .hh-tdr-table .hh-chip--nodata .hh-nodata-long { display: none; }
    .hh-tdr-table .hh-chip--nodata .hh-nodata-short { display: inline; }
    .hh-tdr-table .hh-docs-pay-src {
      max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hh-tdr-table .hh-docs-cell--client > .hh-link,
    .hh-tdr-table .hh-docs-cell--client > .hh-muted {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
      overflow: hidden; max-width: 140px;
    }
  }
}

/* Позначка повернення (4.7) — ОБИДВА сигнали одночасно: іконка ↩ біля
   назви документа (.hh-docs-return-icon) і тонка червона смуга зліва
   рядка (.hh-table__row--return, замінює звичайний border-bottom першої
   комірки на кольоровий border-left, не додає висоти рядку). */
.hh-table__row--return td:first-child {
  border-left: 3px solid var(--danger);
  padding-left: calc(var(--sp-3) - 3px);
}
/* Рядок, що потребує уваги (27.09.2026, «Внутрішні доставки»: посилка в
   однойменне місто іншої області — «Увага! Не той Миколаїв»). Сильніший
   за .hh-table__row--return: не лише смуга, а й тло — це помилка, яку
   треба виправити, а не стан документа. Ті самі токени --danger /
   --danger-quiet, що .hh-chip--danger. На телефоні (картка рядка) смуга й
   тло — на всій картці, бо першої комірки як лівого краю там немає. */
.hh-table__row--alert td { background: var(--danger-quiet); }
.hh-table__row--alert td:first-child {
  border-left: 3px solid var(--danger);
  padding-left: calc(var(--sp-3) - 3px);
}
@media (max-width: 767px) {
  .hh-table--responsive tr.hh-table__row--alert {
    background: var(--danger-quiet);
    border-left: 3px solid var(--danger);
  }
  .hh-table--responsive tr.hh-table__row--alert td:first-child { border-left: 0; padding-left: 0; }
}
.hh-docs-return-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-sm);
  background: var(--danger-quiet); color: var(--danger);
  font-size: 11px; flex: none; margin-right: var(--sp-1);
}

/* Межа інстанса реєстру торгових документів (trade-documents-registry.js,
   scopeOpen/scopedRoot): лише маркер для mount(), без власного бокса —
   макет таблиці й попапів не змінюється. */
.hh-tdr-scope { display: contents; }

/* Рядок «Всі / Замовлення / Видаткові / Чеки / Повернення» + «Нове
   замовлення ▾» праворуч — ОДИН рядок (власник, 09.10.2026: кнопка
   падала рядком нижче, бо .hh-field — стовпчик). Коли місця мало (вузька
   панель), сегменти не переносяться, а стискаються й прокручуються вбік у
   власних межах; кнопка завжди видима. Прокрутка — лише на сегментах, не
   на рядку: інакше випадне меню кнопки обрізалось би. На телефоні макет
   шапки свій (@media max-width: 767px нижче, .hh-tdr-filters). */
.hh-tdr-chips-row { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--sp-3); }
/* Лише ≥768px: на телефоні сегменти розтягуються на весь ряд (flex: 1 0
   auto у мобільному блоці нижче), і ці правила, сильніші за селектором,
   лишили б порожній хвіст праворуч. */
@media (min-width: 768px) {
  .hh-tdr-chips-row > .hh-segmented {
    flex: 0 1 auto; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  .hh-tdr-chips-row > .hh-segmented::-webkit-scrollbar { display: none; }
  .hh-tdr-chips-row > .hh-segmented > .hh-segmented__item { flex: 0 0 auto; white-space: nowrap; }
  .hh-tdr-chips-row__action { flex: none; margin-left: auto; }
}

/* Шеврон розкриття рядка — ОДИН компонент на всі реєстри (власник,
   26.09.2026: «трикутник дуже дрібний і непомітний»). Розмітку дає
   HH_SALES.rowToggleHtml() (design/sales-shared.js), правило —
   docs/01-rules/instruction-design-scale.md §7.6. Замінив .hh-docs-expand
   (гліф 14px кольору --text-faint, 4.6:1 — «вимкнене», не дані).

   Іконка 16px SVG (не гліф: розмір гліфа залежить від гарнітури), зона
   кліку 32×32 / 40×40 на телефоні. Від'ємний margin по вертикалі — зона
   кліку перекриває padding клітинки, а висота рядка лишається ~36px
   (§7.4: висота рядка не залежить від вмісту). Колір --text-muted
   (8.4:1 / 6.5:1), не --text-faint.

   Поворот — клас --open (стан) і --anim-open/--anim-close (щойно
   перемкнули): рендер перемальовує DOM цілком, тож transition на новому
   елементі не мав би з чого стартувати — програє одноразовий keyframe.
   Тривалість — var(--dur): tokens.css обнуляє її при
   prefers-reduced-motion, плюс явне animation:none нижче. */
.hh-row-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; margin: -8px 0 -8px -6px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-muted); cursor: pointer; vertical-align: middle;
}
.hh-row-toggle:hover { background: var(--surface-hover); color: var(--text); }
.hh-row-toggle--static { cursor: inherit; }
.hh-row-toggle__icon { width: 16px; height: 16px; display: block; transform-origin: 50% 50%; }
.hh-row-toggle--open .hh-row-toggle__icon { transform: rotate(90deg); }
.hh-row-toggle--anim-open .hh-row-toggle__icon { animation: hh-row-toggle-open var(--dur) var(--ease); }
.hh-row-toggle--anim-close .hh-row-toggle__icon { animation: hh-row-toggle-close var(--dur) var(--ease); }
@keyframes hh-row-toggle-open { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@keyframes hh-row-toggle-close { from { transform: rotate(90deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .hh-row-toggle__icon { animation: none !important; transition: none !important; }
}
/* Телефон: зона 40×40, але в потоці займає лише ~20px (від'ємні поля з
   боків) — у картці реєстру (три колонки по ~⅓ ширини) повна ширина
   кнопки з'їла б половину назви документа. Ліворуч зона кліку заходить
   рівно на column-gap картки (8px) і не накриває час, праворуч — у gap
   до назви (назва далі в DOM і лежить зверху, її клік не перехоплюється). */
@media (max-width: 767px) {
  .hh-row-toggle { width: 40px; height: 40px; margin: -12px -10px -12px -8px; }
}

/* Розкриття документа (4.5–4.9) — усередині .hh-table__detail-row, свій
   маленький список підрядків, НЕ ще одна <table>: кожен підрядок — це
   факт чи посилання на документ, не табличні дані з колонками. */
.hh-docs-sublist { display: flex; flex-direction: column; gap: 2px; }
.hh-docs-subline {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: var(--size-small);
}
/* Клікабельні підрядки (4.6) — окремий документ, курсор+hover видно ще до
   наведення на явний напис «Відкрити →»; описові підрядки лишаються без
   курсора й без hover — саме ця різниця й читається як «це не документ». */
.hh-docs-subline--clickable { cursor: pointer; }
.hh-docs-subline--clickable:hover { background: var(--surface-hover); }
.hh-docs-subline--clickable .hh-docs-subline-go { margin-left: auto; color: var(--accent); font-size: var(--size-caption); flex: none; }
.hh-docs-subline b { color: var(--text); font-weight: var(--weight-medium); }
.hh-docs-subline-icon { width: 16px; text-align: center; flex: none; color: var(--text-faint); }
.hh-docs-subline-tag { margin-left: auto; flex: none; }
.hh-docs-subline--clickable .hh-docs-subline-tag { margin-left: var(--sp-2); }

/* Перший рядок розкриття дочірнього документа — посилання на батька
   (4.9), візуально відокремлене пунктирною рамкою від решти підрядків. */
.hh-docs-subline--parent {
  border: var(--border-w) dashed var(--border-strong);
  margin-bottom: var(--sp-1);
}
.hh-docs-subline--parent b { color: var(--accent); }
/* Сума документа в підрядку (↰ основа повернення: «на яку суму була
   купівля») — тим самим кольором тексту, що сума в колонці «Сума», і
   не розривається переносом. */
.hh-docs-subline-amount {
  color: var(--text); font-weight: var(--weight-medium);
  white-space: nowrap; flex: none; font-variant-numeric: tabular-nums;
}
/* Телефон: підрядок переноситься цілими елементами, а не виштовхує
   «Відкрити →»/чип за правий край. На 354px рядок-основа з датою, локацією,
   контрагентом, сумою й «Відкрити →» не влазить в один ряд: без переносу
   текст val стискався до слова в рядок, а чип вилазив за картку (жива
   перевірка 01.10.2026; «Повернення 6 позицій · Проведено» вилазив так само
   ще до суми). З переносом довгий текст іде своїм рядком, сума й дія — під
   ним. */
@media (max-width: 767px) {
  .hh-docs-subline { flex-wrap: wrap; row-gap: var(--sp-1); }
}

/* --------------------------------------------------------------------------
   Каскадний фільтр каналу — один рядок хлібних крихт (4.11): чип обраного
   рівня з ✕, далі випадний список наступного рівня (звичайний .hh-select,
   не бутафорський dropdown — той самий компонент форм, менше нового коду
   й краще на телефоні), «Скинути все» праворуч.
   -------------------------------------------------------------------------- */
.hh-docs-filterbar {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1);
}
/* Живий баг 10.09.2026 (Роман, скріншот): .hh-docs-th-optlist (список
   наступного рівня каскаду каналу, issue #926) раніше рендерився ВСЕРЕДИНІ
   .hh-docs-filterbar — того самого нерозривного рядка, що вище зроблений
   під хлібні крихти (flex-wrap:nowrap, overflow-x:auto). Список кнопок
   стискався в залишок ширини рядка й ховав правий край довгих назв каналів
   ("Threads" ставав "Threa") за горизонтальним скролом рядка, якого не
   видно в маленькому попапі. .hh-docs-channel-picker — вертикальна
   обгортка (renderChannelFilterBar, trade-documents-registry.js): крихти
   (.hh-docs-filterbar) окремим рядком зверху, підпис/список/"Скинути все"
   — блокові сусіди на повну ширину попапу, тому список переноситься
   замість стискатись. */
.hh-docs-channel-picker { display: flex; flex-direction: column; gap: var(--sp-1); }
.hh-docs-channel-picker .hh-docs-filterbar:empty { display: none; }
/* Тонований фон, НЕ суцільна заливка (docs/design-code-core.md §1.1) — цей
   чип "обраний рівень каскаду" сам по собі один-два на екрані, але лежить
   у тій самій категорії "стан вибору, що повторюється поруч з іншими
   вибраними станами" (заголовки-фільтри з крапкою поруч, issue #916/#917),
   тому суцільна --surface-brand/--text-on-brand (як було до цього кроку)
   тут так само заборонена документом. var(--accent-quiet)/var(--accent) —
   той самий словник, що вже .hh-tab[aria-selected] і "оплата"-бейджі
   складу (components.css, ~L2833) використовують для "це вибрано". */
.hh-docs-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-quiet); color: var(--accent);
  border-radius: var(--radius-md); padding: 6px 6px 6px 12px;
  font-size: var(--size-small); white-space: nowrap; flex: none; border: 0;
  cursor: pointer;
}
.hh-docs-crumb .hh-docs-crumb-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; opacity: .7;
}
.hh-docs-crumb:hover .hh-docs-crumb-x { opacity: 1; }
.hh-docs-crumb-sep { color: var(--text-faint); font-size: var(--size-small); flex: none; }
/* Наступний рівень — досі звичайний .hh-select (докстрінг вище: мобільний
   пристрій, менше нового коду), АЛЕ візуально не має зливатись зі
   звичайними фільтрами нижче (issue #909, п.2: Роман прочитав початковий
   стан рядка — до першого кліку, коли жодного чипа ще немає, — як «один
   узагальнений список», бо він виглядав так само, як «Статус
   замовлення»/«Статус оплати» під ним). Пунктирна рамка й формою пігулки —
   та сама мова, що .fdrop-btn мокапа: читається як «слот каскаду», не як
   довільний фільтр. */
.hh-docs-filterbar .hh-select {
  flex: 0 0 auto; width: auto; min-width: 160px;
  border-style: dashed; border-radius: var(--radius-full);
  background: var(--surface); color: var(--text-muted);
}
/* margin-left:auto лишається для інших flex-рядків, де ця кнопка могла б
   опинитись; align-self:flex-end — те саме "притиснути праворуч", але для
   .hh-docs-channel-picker (flex-column) вище, де margin-left не діє. */
.hh-docs-reset { margin-left: auto; align-self: flex-end; flex: none; }

/* Часовий фільтр «Усі продажі» — компактніше за портальний стандарт
   (issue #909, п.4-5). НЕ чіпаємо сам .hh-chip--filter/.hh-input —
   issue #714 (28.08.2026) навмисно звів їх до ОДНОГО розміру на весь
   портал саме тому, що «завеликий і неоднаковий» тоді був про сам
   спільний розмір, а не розбіжність між екранами; ще одна портальна
   правка два дні по тому означала б знову розхитати щойно вирівняне.
   Тут інший запит: Роман звірив САМЕ ЦЕЙ рядок із чипами статусів
   таблиці нижче (.hh-docs-status-group .hh-chip, ~18px) — новий,
   густіший контекст. Тому — скоуп-клас на ОБГОРТЦІ (hh-docs-timebar,
   trade-documents-registry.js), не зміна самих спільних класів: інші
   ~15 екранів на HSR.renderPeriodChips лишаються на портальному розмірі.

   Оновлено issue #916/#917: цей рядок більше НЕ стоїть окремим блоком
   над таблицею (Документ 2 §4 — "Дата · час" тепер клік на th) — та сама
   обгортка (і ті самі правила нижче) тепер живе всередині th-попапу
   "Дата · час" і всередині секції "Дата · час" мобільного аркуша
   (popoverContentHtml("date"), trade-documents-registry.js). */
.hh-docs-timebar .hh-chip--filter { min-height: 22px; padding: 1px var(--sp-2); font-size: 11px; }
.hh-docs-timebar .hh-input[type="date"] { min-height: 22px; padding: 1px var(--sp-2); font-size: 11px; width: 122px !important; }
.hh-docs-timebar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hh-docs-timebar .hh-row { flex-wrap: nowrap !important; }
.hh-docs-timebar .hh-chip--filter { flex: none; }

/* --------------------------------------------------------------------------
   Фільтри на заголовках колонок (issue #916/#917, Документ 2 §4, ПІДТВЕРДЖЕНО
   Романом) — заміна старого інлайн-блоку/окремого рядка фільтрів над
   таблицею (#909/#915). Клік на клікабельний `<th>` відкриває маленьке
   випадне меню (.hh-docs-th-popover) із значеннями саме цього виміру:
   канал-каскад (той самий вміст, що раніше .hh-docs-filterbar малював
   рядком), список статусів/типу документа (.hh-docs-th-optlist), часовий
   фільтр (.hh-docs-timebar вище) чи вузький пошук по клієнту.

   Активний фільтр і відкритий стан — тонований фон/текст
   (docs/design-code-core.md §1.1, var(--accent-quiet)/var(--accent)), НЕ
   суцільна заливка: цей стан повторюється в 4-6 заголовках одразу, коли
   застосовано кілька фільтрів разом.
   -------------------------------------------------------------------------- */
.hh-docs-th-btn {
  display: inline-flex; align-items: center; gap: 4px;
  width: 100%; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  cursor: pointer;
}
.hh-docs-th-caret { font-size: 8px; color: var(--text-faint); flex: none; }
.hh-docs-th--active .hh-docs-th-btn,
.hh-docs-th--open .hh-docs-th-btn { color: var(--accent); }
.hh-docs-th--active,
.hh-docs-th--open { background: var(--accent-quiet); }
.hh-docs-th-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: var(--radius-full);
  background: var(--accent); flex: none;
}

/* Клікабельний, невидимий click-catcher (закриває попап кліком поза ним) —
   той самий прийом, що $("sheet").onclick у shell.html, без глобального
   window-listener, який довелось би знімати вручну на кожен rerender
   (компонент перемальовує весь корінь цілком, докстрінг wireThFilters). */
.hh-docs-th-popover-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: transparent; }
.hh-docs-th-popover {
  position: fixed; z-index: var(--z-suggest);
  min-width: 200px; max-width: min(280px, 92vw);
  background: var(--surface-raised); border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-overlay);
  padding: var(--sp-2); max-height: min(360px, 70vh); overflow-y: auto;
}
/* Живий баг 08.09.2026 (Роман, скріншот): попап "Дата · час" на 280px
   тримає 5 пресетів (.hh-docs-timebar вище) в один нерозривний ряд
   (nowrap — докстрінг вище, НЕ чіпаємо заради мобільного #916/#917), тому
   останній чип "Довільний період" ховався за горизонтальним скролом.
   Виміряно вживу (тестова сторінка з тим самим components.css): ряд із
   5 пресетів займає ≈369px контенту, popover 280px давав скрол. Ширший
   лише ЦЕЙ попап (:has(.hh-docs-timebar) — той самий скоуп-прийом, що
   .hh-modal__foot:has(.hh-fulfil-summary) вище в цьому файлі) — інші
   th-попапи (канал/статус/тип документа/клієнт) лишаються на 280px,
   вони й так влазять. Два поля "Довільний період" (122px кожне +
   роздільник) у цю ширину не влазять — це ІСНУЮЧА поведінка scroll-у, що
   так само лишається і на мобільному аркуші; тут ідеться лише про
   комплект з 5 пресетів, який Роман зафіксував на скріншоті. */
.hh-docs-th-popover:has(.hh-docs-timebar) { max-width: min(460px, 92vw); }
.hh-docs-th-optlist { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.hh-docs-th-opt {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-2); border-radius: var(--radius-sm);
  background: none; border: 0; color: var(--text); font-size: var(--size-small);
  cursor: pointer;
}
.hh-docs-th-opt:hover { background: var(--surface-hover); }
.hh-docs-th-opt--active { background: var(--accent-quiet); color: var(--accent); font-weight: var(--weight-medium); }
/* Мульти-select пункти (issue #954, checklistHtml() — "Замовлення"/"Оплата"/
   "Доставка") — та сама тонована кнопка, лише з фіксованим "слотом" під
   галочку зліва, щоб текст пунктів не стрибав, коли позначено/знято. */
.hh-docs-th-opt--check { display: flex; align-items: center; gap: var(--sp-2); }
/* Заголовок групи пунктів (фільтр «Доставка»: «Відвантаження» / «ТТН», 06.10.2026). */
.hh-docs-th-optgroup { padding: var(--sp-2) var(--sp-2) 2px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.hh-docs-th-check { display: inline-block; width: 1em; flex: none; text-align: center; }
.hh-docs-th-client { min-width: 220px; }
.hh-docs-th-popover .hh-input { width: 100%; }

/* Мобільний аркуш «Фільтри · N» — секції за виміром (issue #916/#917,
   заміна старого суцільного інлайн-блоку: той самий per-column вміст, що
   th-попапи на десктопі, popoverContentHtml()/allFilterSectionsHtml(),
   trade-documents-registry.js, лише стопкою без анкорного позиціювання —
   аркуш і так повношириний/знизу). */
.hh-docs-filter-section { margin-bottom: var(--sp-4); }
.hh-docs-filter-section:last-child { margin-bottom: 0; }
.hh-docs-filter-section-label {
  margin: 0 0 var(--sp-2); font-size: var(--size-caption); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
}

@media (max-width: 767px) {
  .hh-docs-status-group td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}

/* ----------------------------------------------------------------------
   Мобільна версія «Усі продажі» (issue #915, оновлено #916/#917) — три
   окремі виправлення, перевірені живцем ПІСЛЯ #909/#1428 (докстрінг вище
   в цьому файлі), не наосліп за скріншотами Романа «до»:

   1) Часовий рядок (.hh-docs-timebar) переносився на другий рядок навіть
      зі стиснутими чипами — горизонтальний скрол замість переносу
      (правила самого .hh-docs-timebar тепер вище в цьому файлі, поза
      медіа-запитом: та сама обгортка з #916/#917 живе всередині
      попапу/секції аркуша на БУДЬ-ЯКІЙ ширині екрана, не лише мобільній).

   2) Канал-каскад + три статуси + тип документа (issue #916/#917: тепер і
      часовий фільтр) — на десктопі живуть у клікабельних заголовках
      колонок (wireThFilters, trade-documents-registry.js), на телефоні —
      за кнопкою «Фільтри · N» (openFilterSheet), що відкриває той самий
      per-column вміст стопкою в hh-sheet (shell.html). Пошук лишається
      окремим полем, завжди видимим (Роман, Документ 2 §4).

   3) Рядок продажу — картка в 3 рядки (час·документ·сума / клієнт /
      три статуси в один рядок), а не 7-8 пар "підпис: значення" одна під
      одною від загального .hh-table--responsive (issue #480 патерн, який
      і дав ті самі 700+px на рядок, що поскаржився Роман). CSS grid на
      самому <tr> замість генеричного flex-стеку — класи hh-docs-cell--*
      (rowCells(), trade-documents-registry.js) розставляють комірки по
      названих ділянках незалежно від того, скільки їх усього (showChannel
      Column вмикає/вимикає "Канал" — картка просто ховає цю комірку).
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Кнопка «Фільтри · N» — лише на телефоні; десктоп фільтрує через клік
     на заголовки колонок (wireThFilters, issue #916/#917). */
  .hh-docs-filters-trigger {
    display: inline-flex; margin: 0 var(--sp-3) var(--sp-3);
  }
}
@media (min-width: 768px) {
  .hh-docs-filters-trigger { display: none; }
}
/* Вміст аркуша (openFilterSheet) — та сама розмітка, що th-попапи, лише
   без горизонтального padding комірок-обгорток (аркуш сам несе свій
   padding, .hh-sheet__panel). */
.hh-docs-filters-sheet .hh-docs-filterbar,
.hh-docs-filters-sheet .hh-row { padding-left: 0; padding-right: 0; }

@media (max-width: 767px) {
  .hh-docs-status-group thead { display: none; }
  .hh-docs-status-group tbody tr.hh-table__row--clickable {
    display: grid;
    /* Назва документа — окремим першим рядком на всю ширину (власник
       01.10.2026: «Замовлення №20260000…» замість CO-2026-000075). У
       третині рядка поміж часом і сумою людський номер CORE не вміщався
       навіть скорочений: «Замовлення CO-2026-000075» — ~196px при 12,5px,
       а третина картки на 375px — ~100px. Час і сума переїхали до клієнта
       (другий рядок): «01:16 · Ольга Гриценко · 1 200,00 ₴». Шість рівних
       колонок — щоб статуси знизу лишились трьома рівними третинами. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "doc doc doc doc doc doc"
      "time client client client amount amount"
      "so so sp sp sd sd";
    column-gap: var(--sp-2);
    row-gap: 3px;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
  }
  .hh-docs-status-group tbody tr.hh-table__row--clickable > td {
    display: block; padding: 0; border: 0;
  }
  .hh-docs-cell--time { grid-area: time; font-size: var(--size-caption); color: var(--text-muted); }
  .hh-docs-cell--doc { grid-area: doc; min-width: 0; }
  .hh-docs-cell--doc .hh-doc-type span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .hh-docs-cell--amount { grid-area: amount; text-align: right; font-weight: var(--weight-medium); white-space: nowrap; min-width: 0; }
  .hh-docs-cell--client { grid-area: client; font-size: var(--size-small); color: var(--text-muted); min-width: 0; max-width: none; }
  /* Канал — прибирається з картки заради компактності (п.1-2), лишається
     доступний повністю через розкриття рядка (детальний підсписок нижче
     рядка вже показує канал/локацію, той самий клік, що на десктопі). */
  /* Специфічність >= reset-правила вище (.hh-docs-status-group tbody
     tr.hh-table__row--clickable > td), інакше воно й далі показує канал —
     "display:block" там переважає простий "display:none" на самому класі
     клітинки (жива перевірка, issue #915: без цього фікса канал і далі
     малювався четвертим рядком картки). */
  .hh-docs-status-group tbody tr.hh-table__row--clickable > td.hh-docs-cell--channel { display: none; }
  .hh-docs-cell--status-order { grid-area: so; }
  .hh-docs-cell--status-payment { grid-area: sp; }
  .hh-docs-cell--status-delivery { grid-area: sd; }
  .hh-docs-cell--status-order .hh-chip,
  .hh-docs-cell--status-payment .hh-chip,
  .hh-docs-cell--status-delivery .hh-chip {
    display: flex; justify-content: center; width: 100%;
    font-size: 10px; padding: 1px var(--sp-1); min-height: 0; white-space: nowrap;
  }
  /* "—"-чіп (dashCls(), trade-documents-registry.js) — Роман, живий
     скріншот 08.09.2026: на телефоні порожня клітинка (Доставка без
     tracking_number — типовий випадок шоурумського продажу; Оплата
     'unknown'/'na') несе той самий контур і фон, що змістовний чіп
     поруч, і три однаково "важкі" плашки в рядку читаються як шум,
     хоча дві з них нічого не кажуть. Гасимо до тексту без рамки/фону —
     той самий прийом, що .hh-docs-pay-src поруч, порожнеча
     лишається видимою (не display:none — колонка й далі на місці,
     клік по рядку розкриває деталі), просто не змагається за увагу з
     фактом. Лише мобільний блок: на десктопі "—" і так лише текст
     кольору tone:"" (chipClass), просторіша таблиця не плутає його зі
     статусом. */
  .hh-docs-cell--status-order .hh-chip--dash,
  .hh-docs-cell--status-payment .hh-chip--dash,
  .hh-docs-cell--status-delivery .hh-chip--dash {
    background: transparent; border-color: transparent;
    color: var(--text-faint); font-weight: var(--weight-regular);
  }
  /* Рядки-пояснення джерел оплати — під чипом у тій самій клітинці "sp",
     центровані й того самого розміру, що чипи навколо. */
  .hh-docs-cell--status-payment .hh-docs-pay-src {
    text-align: center; font-size: 10px; white-space: normal;
  }
  /* «Немає даних про оплату» — довший за «—», у третину рядка на 375px в
     один рядок не вміщається; переносимо, а не обрізаємо. */
  .hh-docs-cell--status-payment .hh-chip--nodata {
    white-space: normal; text-align: center; line-height: 1.2;
  }
  /* Страховка «жодна клітинка не розпирає картку» (29.09.2026, той самий
     принцип, що десктопне правило вище): підпис доставки короткий
     (HH_SALES.deliveryStatusShort), але якщо довший за третину рядка —
     переноситься, а не розширює колонку грида. min-width: 0 — інакше
     колонка 1fr не стискається нижче вмісту (min-width: auto грид-елемента). */
  .hh-docs-status-group tbody tr.hh-table__row--clickable > td.hh-docs-cell--status-order,
  .hh-docs-status-group tbody tr.hh-table__row--clickable > td.hh-docs-cell--status-payment,
  .hh-docs-status-group tbody tr.hh-table__row--clickable > td.hh-docs-cell--status-delivery { min-width: 0; }
  .hh-docs-cell--status-order .hh-chip,
  .hh-docs-cell--status-delivery .hh-chip {
    white-space: normal; overflow-wrap: anywhere; text-align: center;
  }

  /* Червона смуга повернення (issue #909, п.7) — на десктопі це border
     першої <td>; у грид-картці рядок сам стає межею, інакше смуга лежала
     б лише під колонкою "Час", не під усією карткою. */
  .hh-table__row--return td.hh-docs-cell--time { border-left: 0; padding-left: 0; }
  .hh-docs-status-group tbody tr.hh-table__row--return {
    border-left: 3px solid var(--danger);
    padding-left: calc(var(--sp-3) - 3px);
  }
}

/* ==========================================================================
   ORDER PAGE REWORK (issue #961) — «Наявність», масові дії з рядками,
   компактний трек статусу. Величини — design-code-core.md §3/§5,
   перекладені на реальні токени цього файлу (документ називає
   ідеалізовані --milk2/--line/--forest-bg — тут те саме через
   --surface-sunken/--border/--ok-quiet, той самий словник, що вже
   .hh-chip--ok/--warn по всьому файлу).
   ========================================================================== */

/* «Наявність» — пілюльки по локаціях (§3.2 instruction-order-fulfillment.md).
   Рядок пілюльок жодним чином не збільшує висоту рядка таблиці (§3
   design-code-core.md — стала висота рядка): flex-wrap лише на дуже вузькому
   екрані, де рядок і так переходить у карткову верстку. */
.hh-avail {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin-top: 2px;
}
.hh-avail__pill {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 2px 6px; border-radius: 6px;
  background: var(--surface-sunken); border: 1px solid var(--border);
  line-height: 1.3;
}
.hh-avail__pill--zero { opacity: .45; }
/* Локація, звідки пропонується забрати товар (джерело) — тонований
   зелений, той самий словник токенів, що .hh-chip--ok. */
.hh-avail__pill--source {
  background: var(--ok-quiet); border-color: var(--ok-border);
}
/* Дроп-партнер — принципово інший колір (амбер), бо це чужий склад, не
   наш залишок узагалі (goods-movement-and-payments.md §1). */
.hh-avail__pill--drop {
  background: var(--warn-quiet); border-color: var(--warn-border);
}
.hh-avail__pill-code {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  color: var(--text-muted); letter-spacing: .02em;
}
.hh-avail__pill--source .hh-avail__pill-code,
.hh-avail__pill--drop .hh-avail__pill-code { color: inherit; opacity: .85; }
.hh-avail__pill-qty { font-size: 10.5px; font-weight: var(--weight-regular); }
/* Постачальник («FOTL: 94», ADR 0021 D8) — не наш склад (CLAUDE.md §2),
   тому без заливки й з пунктирною рамкою: читається як «десь там, не в
   нас», поруч із нашими складами, але не як ще один склад. Це кнопка
   (tap розкриває «станом на …»), тож скидаємо браузерні стилі кнопки. */
.hh-avail__pill--supplier {
  background: transparent; border-style: dashed; border-color: var(--border-strong);
  font: inherit; color: inherit; cursor: pointer;
}
.hh-avail__pill--supplier .hh-avail__pill-code { font-style: italic; }
/* Знімок старший за 12 год — приглушено, і словом «застаріло», не лише кольором. */
.hh-avail__pill--stale { opacity: .55; }
.hh-avail__pill-stale { font-size: 9.5px; color: var(--text-faint); }
.hh-avail__empty { font-size: 10.5px; color: var(--text-faint); }

/* Панель масових дій над рядками позицій (§11.5) — з'являється, щойно
   вибрано ≥1 рядок; заміняє собою кнопки дій НА кожному рядку окремо
   (issue #961: «прибрати кнопки дій із кожного рядка, замінити на панель»).
   sticky знизу картки позицій, той самий прийом близькості дії до вибору,
   що .hh-formbar. */
.hh-bulkbar {
  display: none; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  background: var(--accent-quiet); border: 1px solid var(--info-border);
  border-radius: var(--radius);
}
.hh-bulkbar--active { display: flex; }
.hh-bulkbar__count { font-size: 12.5px; font-weight: 600; margin-right: var(--sp-1); }
.hh-bulkbar__spacer { flex: 1 1 auto; }
.hh-line-check { width: 16px; height: 16px; flex: none; cursor: pointer; }
.hh-line-check-cell { display: flex; align-items: center; padding-right: var(--sp-2); }

/* Масова зміна подій туру (design/tour-events-bulk.js, власник 09.10.2026).
   Галочка рядка — клітинка фіксованої ширини перед тілом рядка (44px під
   палець на телефоні), тож рядок не стрибає. Панель — прилипла до низу
   екрана над нижньою навігацією (той самий прийом, що .hh-formbar), на
   телефоні — два рядки: «Обрано N» + що/на що, під ними дії на всю ширину.
   Висота панелі від вибору не залежить: лічильник має мінімальну ширину, а
   «Застосувати» лише вимикається. */
.hh-ev-bulk-check {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 32px; min-height: 32px; margin-right: calc(var(--sp-1) * -1); cursor: pointer;
}
.hh-ev-bulk-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.hh-ev-bulkbar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}
.hh-ev-bulkbar__count { min-width: 84px; font-size: var(--size-small); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.hh-ev-bulkbar__field { width: auto; min-width: 0; flex: 1 1 160px; }
.hh-ev-bulkbar__acts { display: flex; gap: var(--sp-2); margin-left: auto; }
.hh-ev-bulkbar__error { flex-basis: 100%; margin: 0; color: var(--danger); }
.hh-ev-bulk-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.hh-ev-bulk-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--sp-2);
  padding: var(--sp-1) 0; border-bottom: var(--border-w) solid var(--border-faint);
}
.hh-ev-bulk-list li:last-child { border-bottom: 0; }
.hh-ev-bulk-list__name { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .hh-ev-bulkbar { bottom: var(--sp-3); }
}
@media (max-width: 767px) {
  .hh-ev-bulk-check { width: 44px; min-height: 44px; margin-left: calc(var(--sp-2) * -1); }
  .hh-ev-bulkbar__field { flex: 1 1 calc(50% - var(--sp-2)); }
  .hh-ev-bulkbar__acts { flex-basis: 100%; margin-left: 0; }
  .hh-ev-bulkbar__acts .hh-btn { flex: 1; min-height: 44px; }
}

/* Трек статусу компактний (§11.4) — один чіп + підпис "далі — …", розгортає
   повний список лише по кліку, замість завжди видимого вертикального
   списку з 5 радіо-кроків. */
.hh-status-compact { display: flex; flex-direction: column; gap: 2px; }
.hh-status-compact__row { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.hh-status-compact__next { font-size: 11px; color: var(--text-muted); }
.hh-status-track-full { margin-top: var(--sp-2); }

/* Чипи стану замовлення «Оплата / Відвантаження / Фіскалізація /
   Повернення» (власник 30.09.2026; HH_SALES.orderStatusChipsHtml). Ряд
   переноситься — на 375px чипи стають у два рядки, не вилазять за екран.
   Кожен чип — <details>: тап відкриває деталі під ним (на телефоні
   наведення немає), крапка лишає стан читабельним без кольору. */
.hh-status-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.hh-status-chip { position: relative; }
/* Статус документа й осі стану — один рядок (власник 30.09.2026): статус
   (.hh-status-compact) і чипи осей стоять поруч і переносяться разом; на
   375px переходять на наступний рядок, а не вилазять за екран. */
.hh-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.hh-status-line > .hh-status-chips { margin: 0; display: contents; }
.hh-status-chip > summary { list-style: none; cursor: pointer; min-height: 26px; font-size: 12px; }
.hh-status-chip > summary::-webkit-details-marker { display: none; }
.hh-status-chip > summary:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.hh-status-chip__axis { color: var(--text-muted); font-weight: var(--weight-medium); }
.hh-status-chip__label { font-weight: 600; }
.hh-status-chip__value { font-variant-numeric: tabular-nums; }
.hh-status-chip__pop {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 220px; max-width: calc(100vw - 32px);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-raised);
  font-size: 12px; display: flex; flex-direction: column; gap: 4px;
}
.hh-status-chip__row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.hh-status-chip__row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  /* Чипи на телефоні стоять від лівого поля — розкриття на всю ширину
     під самим чипом, без виїзду за екран. */
  .hh-status-chip__pop { min-width: 0; width: calc(100vw - 32px); max-width: none; }
}

/* Ланцюжок документів (власник 05.10.2026): у розкритті чипа осі — спершу
   посилання на документи цієї осі, далі цифри. Чип замовлення на картці
   видаткової — посилання (.hh-doc-chain__order). */
.hh-status-chip__docs { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; margin-bottom: 2px; border-bottom: var(--border-w) solid var(--border); }
.hh-status-chip__doc { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.hh-doc-chain { margin: 0 0 var(--sp-4); }
/* Шапка видаткової (власник 06.10.2026): статус документа, канал і
   ланцюжок замовлення — ОДИН рядок (.hh-status-line), а не стовпчик, де
   канал «Онлайн · hygge-hoodie.c…» обрізався до 148px. Чипи статусу й
   каналу — того ж розміру, що чипи ланцюжка (26px, 12px), щоб рядок
   стояв рівно. Канал не обрізається, доки влазить у рядок; на телефоні
   чипи переносяться, і лише чип, ширший за весь екран, отримує «…»
   (повна назва — у title). */
.hh-doc-chips { margin: 0 0 var(--sp-4); }
.hh-doc-chips > .hh-chip { min-height: 26px; font-size: 12px; }
.hh-doc-chips > .hh-chip--clamp { max-width: 100%; }
/* «Друк ▾» / «Дії ▾» шапки документа на телефоні стоять ПІД заголовком,
   біля лівого краю, а список меню прив'язаний праворуч (right: 0) — він
   виїжджав за лівий край екрана, і причина під «Провести» обрізалась.
   На вузькому екрані список кріпиться до лівого краю рядка кнопок і не
   ширший за екран. */
@media (max-width: 767px) {
  [data-doc-head-actions] { position: relative; }
  [data-doc-head-actions] .hh-menu { position: static; }
  [data-doc-head-actions] .hh-menu__list { left: 0; right: auto; width: min(320px, calc(100vw - 32px)); }
  /* Картка замовлення: .hh-section-head — flex space-between, і «Дії ▾»
     зазвичай лишалась праворуч на рядку заголовка, а ліве кріплення списку
     тоді виїжджало за ПРАВИЙ край. На телефоні — завжди окремим рядком. */
  .hh-section-head > [data-order-head-actions] { flex-basis: 100%; }
}
/* Тонований, не суцільний (instruction-design-scale.md §2): посилання на
   документ — акцентний тон із рамкою, як Primary-кнопка. */
.hh-doc-chain__order { min-height: 26px; font-size: 12px; text-decoration: none; color: var(--accent); background: var(--accent-quiet); border-color: var(--accent); }
.hh-doc-chain__order:hover { text-decoration: underline; }
.hh-doc-chain__order:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }

/* Блок «Відвантаження» — ОДИН на картці замовлення й видаткової
   (design/delivery-block.js, власник 05.10.2026). Компактно за
   01-rules/instruction-design-scale.md: картка 12px, рядок ТТН — номер і
   джерело одним рядком, статус — більшим кольоровим чипом (13px, крапка),
   останній текст трекінгу й «Планова доставка» — одразу під ним, дії —
   малими кнопками одним рядком із переносом. */
.hh-dlv { padding: var(--sp-3); container: hh-dlv / inline-size; }
.hh-dlv__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.hh-dlv__headrows { margin-top: var(--sp-2); }
.hh-dlv__list { display: flex; flex-direction: column; }
.hh-dlv__item { padding: var(--sp-2) 0; border-top: var(--border-w) solid var(--border); }
/* Рядок ТТН (власник 09.10.2026): вузько (телефон 375, вузька колонка
   картки) — одна колонка: номер/статус, «✕» угорі праворуч, дії рядком
   під статусом. Блок ширший за 520px — дві колонки: ліворуч номер,
   статус, планова й сканування; праворуч дії. Container query, не ширина
   вікна: блок той самий у широкій і вузькій колонці. */
.hh-dlv__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main rm" "acts acts"; column-gap: var(--sp-2); align-items: start;
}
.hh-dlv__main { grid-area: main; min-width: 0; }
.hh-dlv__item > .hh-dlv__actions { grid-area: acts; align-items: center; gap: 4px var(--sp-2); }
@container hh-dlv (min-width: 520px) {
  .hh-dlv__item { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main acts rm"; }
  .hh-dlv__item > .hh-dlv__actions { margin-top: 0; justify-content: flex-end; max-width: 300px; }
}
.hh-dlv__headrows + .hh-dlv__list > .hh-dlv__item:first-child { margin-top: var(--sp-2); }
.hh-dlv__head + .hh-dlv__list > .hh-dlv__item:first-child { border-top: 0; margin-top: var(--sp-1); }
.hh-dlv__item--cancelled { opacity: .75; }
.hh-dlv__top { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--sp-2); min-width: 0; }
.hh-dlv__num { font-size: var(--size-small); font-weight: 600; }
.hh-dlv__num .hh-code { font-size: inherit; }
.hh-dlv__num--cancelled { text-decoration: line-through; color: var(--text-muted); }
.hh-dlv__src { font-size: 12px; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.hh-dlv__remove { grid-area: rm; }
.hh-dlv__refresh .hh-spinner { width: 18px; height: 18px; }
.hh-dlv__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin-top: 6px; }
.hh-dlv__chip { font-size: var(--size-small); line-height: 1.3; padding: 3px 10px; font-weight: 600; min-height: 26px; }
.hh-dlv__chip .hh-chip__dot { width: 8px; height: 8px; }
.hh-dlv__track { font-size: 12px; color: var(--text); flex: 1 1 200px; min-width: 0; }
.hh-dlv__eta { margin: 6px 0 0; font-size: var(--size-small); color: var(--text); }
.hh-dlv__eta b { font-weight: 700; }
.hh-dlv__eta--late { color: var(--warn); }
.hh-dlv__meta { margin: 4px 0 0; font-size: 12px; line-height: var(--lh-caption); }
.hh-dlv__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.hh-dlv__foot { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: var(--border-w) solid var(--border); }
/* «+ Додати ТТН ▾» стоїть ліворуч — меню відкривається вправо від кнопки. */
.hh-dlv__foot .hh-menu__list { left: 0; right: auto; min-width: 260px; }
.hh-dlv__foot .hh-menu__item:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
/* Посилене попередження в «Прибрати згенеровану ТТН з CORE?» (лише суперадмін). */
.hh-dlv__warn {
  padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--danger-border); border-radius: var(--radius);
  background: var(--danger-quiet); color: var(--text); font-size: var(--size-small); line-height: var(--lh-caption);
}
.hh-dlv__warn ul { margin: 0; padding-left: 1.2em; }
.hh-dlv__warn li + li { margin-top: 2px; }
.hh-dlv__empty { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--text-muted); }
.hh-dlv__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.hh-dlv__form .hh-input { flex: 1 1 180px; min-width: 0; max-width: 260px; }
.hh-dlv__form .hh-select { flex: 0 1 160px; min-width: 0; }
.hh-dlv__add { margin-top: var(--sp-2); }
.hh-dlv__error { margin: 4px 0 0; font-size: 12px; color: var(--danger); }
.hh-dlv__note { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--warn); }
.hh-dlv__note--danger { color: var(--danger); }
.hh-dlv__extra { margin-top: var(--sp-3); }
/* 762: кілька ТТН — зведення в шапці блоку і коментар до кожної ТТН прямо
   в рядку (кнопка «коментар» → поле з ✓/✕, без вікна). */
.hh-dlv__summary { font-size: 12px; font-weight: 600; }
.hh-dlv__comment-btn { font-size: 12px; color: var(--text-muted); }
.hh-dlv__comment {
  display: block; margin: 4px 0 0; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: 12px; line-height: var(--lh-caption); color: var(--text-muted);
  font-style: italic; overflow-wrap: anywhere; cursor: pointer;
}
.hh-dlv__comment:hover { color: var(--text); text-decoration: underline dotted; }
.hh-dlv__comment:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.hh-dlv__comment--ro { cursor: default; }
.hh-dlv__comment--ro:hover { color: var(--text-muted); text-decoration: none; }
.hh-dlv__comment-edit { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.hh-dlv__comment-edit .hh-input { flex: 1 1 auto; min-width: 0; min-height: 30px; font-size: 13px; }
.hh-dlv__comment-ok { color: var(--ok); }
@media (max-width: 480px) {
  .hh-dlv__form .hh-input { max-width: none; }
  .hh-dlv__comment-edit .hh-input { font-size: 16px; } /* iOS не зумить поле на фокусі */
}

/* «Оплати» (§11.1) — факт грошей, окремо від термінів у шапці. */
.hh-pay-fact-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-2); padding: 3px 0;
}

/* Компактний пікер «Профіль <значення> ▾» у шапці форми (issue #961 §11.7)
   — замінює завжди розгорнутий <select>. Тонований фон, не суцільна
   заливка (§1.1) — це стан "клікабельно розкрити", не Primary-дія. */
.hh-profile-picker {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); border: 1px solid var(--border);
  color: var(--text); font-size: var(--size-caption); cursor: pointer;
}
.hh-profile-picker:hover { background: var(--surface-hover); }

/* «Наявність» компактна (issue #961 §3.4) — B2B-профіль: одне число під
   клітинкою (вільний залишок на основному складі), не пілюльки по
   локаціях. */
.hh-avail--compact { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.hh-avail--compact b { color: var(--text); font-weight: var(--weight-medium); }

/* Клітинка розмірної сітки в B2B (issue #961 §3.4) — кнопка розміру +
   дрібне число вільного залишку під нею, замість пілюльок/суперскрипта. */
.hh-order-size-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }

/* --------------------------------------------------------------------------
   Каталог — дерево з локаціями колонками (design/screen-catalog-tree.js,
   instruction-catalog-tree.md §4, issue #971)

   Ліві колонки (чекбокс, товар) і підсумковий рядок прилипають при скролі
   (§4: "Ліві колонки ... прилипають при горизонтальному скролі.
   Підсумковий рядок прилипає знизу.") — чистий CSS position:sticky, без
   JS-хитрощів (доручення п.6). Клас на .hh-table-wrap, а не зміна
   спільного .hh-table (~L1130, той самий принцип, що .hh-docs-table-wrap
   вище): горизонтальний скрол потрібен лише тут, де стовпців локацій може
   бути більше, ніж влазить на телефонний екран.
   -------------------------------------------------------------------------- */
.hh-catalog-tree-wrap { overflow-x: auto; }
.hh-catalog-tree-wrap table { position: relative; }

/* Дві ліві колонки — чекбокс (28px) і "Товар" — прилипають зліва.
   :nth-child узгоджено з розміткою treeHtml()/level*RowHtml(): td/th 1 —
   чекбокс, td/th 2 — товар. Однакова фонова заливка на кожен стан рядка
   (звичайний/hover/lvl1/totrow), інакше текст сусідньої колонки
   просвічує крізь прилиплу під час скролу. */
.hh-catalog-tree-wrap th:nth-child(1), .hh-catalog-tree-wrap td:nth-child(1),
.hh-catalog-tree-wrap th:nth-child(2), .hh-catalog-tree-wrap td:nth-child(2) {
  position: sticky; background: var(--surface); z-index: 1;
}
.hh-catalog-tree-wrap th:nth-child(1), .hh-catalog-tree-wrap td:nth-child(1) { left: 0; }
.hh-catalog-tree-wrap th:nth-child(2), .hh-catalog-tree-wrap td:nth-child(2) { left: 28px; }
.hh-catalog-tree-wrap thead th:nth-child(1), .hh-catalog-tree-wrap thead th:nth-child(2) { z-index: 2; }
.hh-catalog-tree-wrap tr[style*="surface-hover"] td:nth-child(1),
.hh-catalog-tree-wrap tr[style*="surface-hover"] td:nth-child(2),
.hh-catalog-tree-wrap tr.hh-catalog-tree__total td:nth-child(1),
.hh-catalog-tree-wrap tr.hh-catalog-tree__total td:nth-child(2) { background: var(--surface-hover); }
.hh-catalog-tree-wrap tbody tr:hover td:nth-child(1),
.hh-catalog-tree-wrap tbody tr:hover td:nth-child(2) { background: var(--surface-hover); }

/* Підсумковий рядок — прилипає знизу видимої області таблиці. */
.hh-catalog-tree__total td {
  position: sticky; bottom: 0; background: var(--surface-hover); z-index: 1;
}
.hh-catalog-tree__total td:nth-child(1), .hh-catalog-tree__total td:nth-child(2) { z-index: 2; }

/* Колонка "Партнери" (згорнута чи розгорнута по партнеру) — бурштиновий
   текст (§4: "чужий склад, плутати з власним не можна ніде"). */
.hh-td--amber { color: var(--amber-tx); }
.hh-td--amber .hh-table__secondary { color: var(--amber-tx); opacity: .6; }

/* Колонка "Разом" — напівжирна (§4), остання в наборі. */
.hh-catalog-tree__td-total { font-weight: var(--weight-medium); }

/* Заголовок "Партнери" клікабельний — розкриває деталізацію по партнеру
   (§4). Стрілка ▾/▸ поруч із назвою, той самий прийом, що дерево рядків. */
.hh-catalog-tree__partner-head { cursor: pointer; user-select: none; }
.hh-catalog-tree__partner-head:hover { color: var(--text); }

/* ===========================================================================
   КАРТКИ ТИПІВ КАМПАНІЇ — Маркетинг → Кампанії, вибір при створенні
   (instruction-marketing-ux.md §3, §4, screen-marketing-projects.js).
   Клік одразу створює кампанію — тут немає стану "вибрано", лише hover. */
.hh-kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.hh-kind-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  /* 14px, не var(--sp-4) (16px) — instruction-marketing-round2.md, розділ
     A: "13-14px, зараз виглядають більшими". Жоден крок шкали sp-* не
     влучає в цей діапазон (sp-3=12, sp-4=16), тому сире значення — той
     самий прийом, що вже в mockup-marketing.html, а не вигаданий токен
     на одне місце використання. */
  padding: 14px;
  background: var(--surface);
  border: var(--border-w) solid var(--border-faint);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.hh-kind-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.hh-kind-card__emoji { font-size: 28px; line-height: 1; }
.hh-kind-card__label { font-weight: var(--weight-bold); }
.hh-kind-card__hint { font-size: var(--size-caption); color: var(--text-muted); }

/* Заголовок-кнопка — інлайн-редагування назви кліком (§4). Виглядає як
   .hh-h1, поводиться як контрол: без рамки в спокої, рамка на фокусі/hover
   підказує, що це можна натиснути. */
.hh-title-edit {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.hh-title-edit:hover { text-decoration: underline dotted; }
/* Значення в картці, що редагується кліком (кампанія: лінія, відповідальний,
   бюджет): текст, не поле. Достатня зона дотику для телефона. */
.hh-inline-edit { min-height: 32px; text-align: left; }

/* Кольорова заглушка обкладинки — E2 (instruction-marketing-ux.md §5):
   ЄДИНИЙ сьогоднішній стан, не фолбек на випадок відсутнього фото —
   реального завантаження обкладинки не існує (докстрінг
   screen-marketing-projects.js). Один колір під усі типи навмисно:
   design-code-core.md §1 палітру не змінює, а шість вигаданих кольорів
   під шість типів були б новою палітрою. */
.hh-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-sm);
  background: var(--accent-quiet);
  vertical-align: middle;
}

/* Тумблер розгортання механіки в стрічці кроків (§4.2, диспетчер
   step-panel.js) — маленька версія hh-icon-btn: значок ▸/▾ не потребує
   повного touch-таргету поруч із текстовим рядком стану. */
.hh-icon-btn--sm { width: 22px; height: 22px; font-size: var(--size-caption); }

/* Розгорнутий блок механіки — та сама картка, що інші вкладені панелі
   (.hh-card), трохи прибраний відступ зліва: він підпорядкований кроку,
   не самостійний елемент стрічки. */
.hh-mechanic-detail {
  margin: var(--sp-2) 0 var(--sp-3) var(--sp-5);
  padding: var(--sp-3);
  border: var(--border-w) solid var(--border-faint);
  border-radius: var(--radius);
  background: var(--surface);
}

/* --- Компактний рядок кроку (instruction-corporate-steps-compact.md) ---
   Значення (19px, 12.5px/10.5px, 8px падінг) — точно з mockup-corporate.
   html (.stepline/.s-ic/.s-t), переведені на словник токенів цього
   застосунку (--sp-, --surface, --text, --ok), не окрему кольорову схему
   мокапу — той самий переклад, що вже мав .hh-fulfil-* вище. Раніше крок
   був окремою карткою ~70px із випадайкою статусу на всю ширину; шість
   кроків не вміщались без прокрутки.

   БАГ, ЩО ЛАМАВ УВЕСЬ ЦЕЙ БЛОК (знайдено 08.09.2026, живий репорт Романа
   «крок рендериться стовпчиком, не рядком»): попередній варіант цього
   коментаря писав перелік токенів зірочкою впритул до похилої риски
   (наприклад "sp", зірочка, похила риска, "surface" — три рази підряд).
   Ця пара символів у CSS є ЗАКРИВАЮЧИМ МАРКЕРОМ КОМЕНТАРЯ, і закрила
   його передчасно. Усе, що йшло далі (аж до наступної випадкової такої
   ж пари символів у тексті нижче), парсер читав як справжній CSS —
   сміття, яке зіпсувало розбір, і сам клас .hh-stepline (display:flex)
   випадав з таблиці стилів повністю: рядок кроку рендерився стовпцем
   (кожен <span> інлайновий, але без display:flex на батьківському
   елементі це нічого не важило). Урок — у переліку токенів через
   похилу риску одразу після зірочки-«вище» ставити пробіл або кому,
   ніколи не клеїти впритул. */
.hh-stepline {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: var(--border-w) solid var(--border-faint);
  cursor: pointer;
}
.hh-stepline:last-child { border-bottom: none; }
.hh-stepline__ic {
  width: 19px; height: 19px; border-radius: var(--radius-full); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  background: var(--surface-sunken); color: var(--text-faint);
}
.hh-stepline--done .hh-stepline__ic { background: var(--ok-quiet); color: var(--ok); }
.hh-stepline--active .hh-stepline__ic { background: var(--surface-brand); color: var(--text-on-brand); }
/* Підсвітка активного кроку фоном і невеликим відступом (мокап:
   --choco-tint, тут — сумісний з темною/світлою темою color-mix, не
   зафіксований rgba — той самий колір не давав би контрасту в темній
   темі). */
.hh-stepline--active {
  background: color-mix(in srgb, var(--surface-brand) 8%, var(--surface));
  margin: 0 calc(var(--sp-2) * -1); padding: var(--sp-2); border-radius: var(--radius-sm);
  border-bottom: none;
}
.hh-stepline__handle { flex: 0 0 auto; cursor: grab; }
.hh-stepline__body { flex: 1; min-width: 0; }
/* white-space/overflow — Роман 07.09: довга назва кроку на вузькому
   екрані переносила чіп статусу на другий рядок замість того, щоб рядок
   лишався одним (§B/§3 навмисно звели його до одного рядка). Обрізка
   назви трьома крапками — той самий компроміс, що .hh-filerow__name. */
.hh-stepline__title {
  font-size: 12.5px; font-weight: 600;
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
/* .s-d мокапу — текстова мітка стану, НЕ контрол: зміна стану
   переїхала в попап кроку (§3/§4 інструкції), рядок списку — лише
   перегляд. */
.hh-stepline__status { font-size: 10.5px; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap; }
/* Прев'ю опису/коментарів (instruction-corporate-steps-compact.md
   §4.1.1) — окремий приглушений рядок ПІД назвою, лише коли крок його
   рендерить (stepPreviewLine() у step-panel.js повертає "" інакше, тому
   .hh-stepline не росте для кроків без опису/коментарів). display:block
   — той самий inline .hh-stepline__body інакше не переносив би це на
   новий рядок сам. */
.hh-stepline__preview { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.hh-stepline__preview-text {
  display: inline-block; max-width: 100%; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Файли кроку/проєкту (instruction-corporate-redesign.md §5, мокап
   .filelist/.filerow/.fileadd) — та сама розмітка й ті самі пропорції
   (gap 6/8px, padding 6px 0, font-size 12/10.5px), кольори — зі словника
   токенів застосунку: sky-d мокапу → --accent (той самий колір, що
   .hh-link), sub2 → --text-faint, line → --border-faint. */
.hh-filelist { display: flex; flex-direction: column; gap: var(--sp-1); }
.hh-filerow { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px;
  padding: var(--sp-1) 0; border-bottom: var(--border-w) solid var(--border-faint); }
.hh-filerow:last-child { border-bottom: none; }
.hh-filerow__icon { color: var(--accent); flex: 0 0 auto; }
.hh-filerow__name { flex: 1; min-width: 0; color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-filerow__name:hover { text-decoration: underline; }
.hh-filerow__size { color: var(--text-faint); font-size: 10.5px; flex: 0 0 auto; }
.hh-filerow__del { color: var(--text-faint); cursor: pointer; font-size: 13px;
  background: none; border: none; padding: 0 var(--sp-1); flex: 0 0 auto; }
.hh-filerow__del:hover { color: var(--danger); }

/* Інлайн-«+» конструктора кроків (instruction-corporate-redesign.md §4,
   мокап .plus-inline/.addstep-row/.addgroup-row/.editable) — ті самі
   пропорції (20×20px кружечок, gap 8px, padding 8-10px), переклад
   кольорів: choco мокапу → --surface-brand (той самий hex, той самий
   принцип перекладу, що .hh-stepline--active вище), sub2 → --text-faint,
   choco-tint → color-mix(--surface-brand). */
.hh-editable { cursor: text; border-bottom: var(--border-w) dashed transparent; transition: border-color .15s; }
.hh-editable:hover { border-bottom-color: var(--text-faint); }
.hh-plus-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--radius-sm);
  border: var(--border-w) dashed var(--text-faint); color: var(--text-faint);
  font-size: 14px; line-height: 1; cursor: pointer; flex: 0 0 auto; background: transparent;
}
.hh-addstep-row:hover .hh-plus-inline, .hh-addgroup-row:hover .hh-plus-inline {
  border-color: var(--surface-brand); color: var(--surface-brand);
  background: color-mix(in srgb, var(--surface-brand) 8%, transparent);
}
.hh-addstep-row {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1);
  color: var(--text-faint); font-size: 12px; cursor: pointer;
}
.hh-addstep-row__label { flex: 1; }
.hh-addstep-row--editing { cursor: default; }
.hh-addstep-row__input {
  border: none; background: transparent; font-size: 12.5px; color: var(--text);
  outline: none; flex: 1; border-bottom: var(--border-w) solid var(--surface-brand); padding: 2px 0;
}
.hh-addgroup-row {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-1) var(--sp-1);
  color: var(--text-faint); font-size: 12px; cursor: pointer;
}

/* Інлайн-форма нового проєкту (instruction-corporate-redesign.md §3,
   мокап .newproject-inline) — та сама рамка кольору бренду й ті самі
   пропорції (padding 14/16px, radius 11px), переклад: bg-head мокапу →
   --surface-sunken, choco → --surface-brand. */
.hh-newproject-inline {
  background: var(--surface-sunken); border: var(--border-w) solid var(--surface-brand);
  border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-4);
}

/* Пояснювальна виноска (мокап .note, instruction-corporate-redesign.md —
   «Це не нова сутність» тощо) — раніше клас .hh-note використовувався в
   чотирьох місцях (screen-corporate.js/-home/-clients/-sales) БЕЗ
   жодного визначення тут — рендерився неоформленим текстом. Переклад
   токенів: bg-head мокапу → --surface-sunken, sky → --accent (той самий
   колір, що .hh-link).
   .hh-note--warn (amber-варіант) прибрано 07.09 разом із блокером §6.3,
   заради якого його й додали, — жоден екран більше не показує «зв'язку
   немає»: якщо знадобиться варіант-попередження знову, повернути з тим
   самим переліком amber-bg/amber-tx → --warn-quiet/--warn. */
.hh-note {
  background: var(--surface-sunken); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--sp-2) var(--sp-3);
  font-size: 11.5px; color: var(--text-muted); line-height: 1.55;
}
.hh-note b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   X · Аналітика §5 «Прогноз» (design/screen-x-analytics.js, Роман,
   14.09.2026 і 15.09.2026 — шостий раунд живих зауважень, п.1/2/3/4/5/6) —
   таблиця з фіксованою шириною колонок, горизонтальним скролом у
   власному контейнері (той самий прийом, що вже .hh-docs-table-wrap,
   issue #916/#917, НЕ зміна спільного .hh-table-wrap), ДВОМА приклеєними
   зліва колонками (товар + Σ) і виділеним рядком групи «Вид товару».
   -------------------------------------------------------------------------- */

/* Горизонтальний скрол лише тут, коли колонок подій більше, ніж влазить
   (min-width таблиці рахується інлайн у screen-x-analytics.js з кількості
   колонок) — .hh-table-wrap до 29.09.2026 ніс overflow:hidden (тепер overflow-x: auto — див. сам клас), тому без власного
   класу зайве просто зникало б, не скролилось. */
.hh-x-forecast-table-wrap { overflow-x: auto; overflow-y: hidden; }
.hh-x-forecast-table { table-layout: fixed; }

/* Дві приклеєні зліва колонки під час горизонтального скролу (п.1,
   живий баг 15.09.2026): раніше приклеєною була лише товарна колонка
   (left:0) — колонка «Σ» ішла звичайним потоком і зникала під нею/
   ховалась під наступними колонками подій щойно починався скрол.
   Значення `left` другої колонки ЖОРСТКО дорівнює ширині першої
   (NAME_COL_WIDTH, screen-x-analytics.js) — обидва числа мають
   лишатися синхронними, якщо колонка товару зміниться в ширині. */
.hh-x-forecast-sticky-col {
  position: sticky; z-index: 2; background: var(--surface);
}
.hh-x-forecast-sticky-col--name { left: 0; }
.hh-x-forecast-sticky-col--sum { left: 240px; } /* = NAME_COL_WIDTH (screen-x-analytics.js) */
.hh-x-forecast-table tbody tr:hover .hh-x-forecast-sticky-col { background: var(--surface-hover); }

/* Місто в заголовку колонки-події — переноситься у два рядки замість
   розтягування колонки (п.2, живий скріншот: довга назва міста
   розпирала колонку ширшою за сусідні). */
.hh-x-forecast-city {
  display: block; max-width: 76px; white-space: normal; word-break: break-word;
  font-size: 10.5px; line-height: 1.2; font-weight: var(--weight-medium); color: var(--text);
}

/* Живий баг 15.09.2026 (п.3): місто/дата — змінної висоти (одно- чи
   дворядкове місто, коротка чи довша дата), і коли увесь стек
   «місто → дата → чекбокс» верстався одним потоком, чекбокс сусідньої
   колонки з'їжджав нижче/вище залежно від того, скільки рядків зайняв
   текст над ним — увесь ряд чекбоксів «стрибав» по вертикалі. Фіксована
   мінімальна висота під місто+дату (2 рядки міста ~10.5px/1.2 + 1 рядок
   дати ~10.5px), вирівняна ДОНИЗУ (`justify-content:flex-end`), тримає
   межу з керівним рядком нижче на одній лінії незалежно від того,
   скільки місця зайняв текст. */
/* Живий баг 15.09.2026, восьмий раунд (Роман: «вирівняно лише в перших
   кількох колонках, далі знову різнобій») — фікс шостого раунду
   (min-height:38px на .hh-x-forecast-headinfo нижче) вирівнював
   headctl лише коли ВСІ колонки мали однакову висоту стека
   місто+дата. На реальному турі з 8-10+ подіями хоч одна колонка
   майже завжди довша за 38px (довша назва міста — третій рядок
   переносу, чи довша дата) — <tr> заголовка тоді розтягується під
   НАЙВИЩУ колонку (звичайна поведінка таблиці), але headinfo
   решти колонок і далі займає лише свій min-height, не всю
   висоту комірки: headctl опинявся одразу під коротким текстом,
   вище за сусідні колонки, а не на спільній нижній лінії. Ключ —
   .hh-x-forecast-headcol мусить розтягуватись на всю висоту `<th>`
   (height:100%, table-комірка вже стає високою під найвищу колонку
   рядка), а headinfo — рости через `flex` замість фіксованого
   min-height, тоді headctl завжди притиснутий до низу КОМІРКИ, а
   не до низу свого власного тексту. */
/* height:1px на самій `<th>` (renderForecastColumnHead, screen-x-
   analytics.js, клас .hh-x-forecast-th) — класичний трюк для відсоткової
   висоти в таблицях:
   комірка з `height:auto` (як тут, без трюку) не дає дочірньому
   `height:100%` жодного значення для розрахунку (специфікація трактує
   auto як "немає базової висоти"), і флекс-обгортка нижче лишається
   висотою рівно свого вмісту навіть коли РЯДОК фактично вищий через
   сусідню колонку з довшою назвою міста. Явна (хай і крихітна) висота
   комірки робить її "resolved", тоді як реальний рендер рядка й далі
   росте під найвищу колонку — так само, як і без трюку. Без цього
   headctl нижчих колонок лишався притиснутим до свого власного тексту,
   а не до спільної нижньої лінії рядка (живий баг 15.09.2026, восьмий
   раунд — "вирівняно лише в перших колонках"). */
.hh-x-forecast-th { height: 1px; }
.hh-x-forecast-headcol {
  display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: normal;
  height: 100%;
}
.hh-x-forecast-headinfo {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 38px; flex: 1 0 auto;
}
/* Керівний рядок — чекбокс АБО лінк «гостей?», ніколи обидва одночасно
   (п.4, живий баг 15.09.2026): раніше подія без Планової кількості
   гостей показувала порожній чекбокс І лінк «гостей?» окремим рядком
   під усім блоком — зайвий рядок зсував сусідні колонки вниз. Тепер
   лінк займає РІВНО те саме місце (.hh-x-forecast-headctl), де в інших
   колонках лежить чекбокс — фіксована висота тримає обидва варіанти
   на однаковій лінії. flex-shrink:0 (восьмий раунд) — headinfo вище
   тепер росте (flex:1) і без цього стиснув би цей блок, коли рядок
   вищий за мінімум.
   */
.hh-x-forecast-headctl {
  display: flex; align-items: center; justify-content: center; height: 18px; flex: 0 0 auto;
}

/* «Гостей: N» під керівним рядком (Роман, 16.09.2026) — ПЛАНОВА
   кількість гостей події (events.capacity), тобто знаменник формули
   §5.3, якою пораховані клітинки цієї ж колонки. Підпорядкований
   другорядний текст: дрібніший за дату (th = 10px, тут 9px) і
   .hh-faint кольором — той самий рівень, що вже несе дата, лише на
   сходинку тихіше.
   Фіксована висота й `flex:0 0 auto` — з тієї ж причини, що в
   .hh-x-forecast-headctl вище: слот існує в КОЖНІЙ колонці (у події
   без Планової кількості він порожній, бо «Гостей: 0» збрехало б), і
   якби його висота стрибала (порожній vs. текст, один рядок vs. два),
   ряд чекбоксів над ним знову з'їхав би врізнобій — рівно той живий
   баг 15.09.2026, який фіксують headinfo/headctl.
   nowrap + ellipsis замість переносу: подієва колонка — фіксовані 90px
   (colgroup у screen-x-analytics.js), і саме перенос у другий рядок
   зламав би спільну висоту; довге число радше обріжеться, ніж
   розсуне колонку. */
.hh-x-forecast-headguests {
  height: 12px; flex: 0 0 auto;
  max-width: 76px;
  font-size: 9px; line-height: 12px; letter-spacing: normal; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Клітинка назви товару/розміру — колонка приклеєна ОКРЕМО від суми
   (.hh-x-forecast-sticky-col--name вище). Живий баг 15.09.2026 (п.5):
   назва раніше обрізалась трикрапкою (text-overflow:ellipsis,
   white-space:nowrap) і мала зарезервований padding-right під inline-
   бейдж суми в цій самій клітинці — Σ переїхала в окрему колонку
   (renderForecastSumValue, screen-x-analytics.js), тож і зарезервований
   відступ, і обрізання більше не потрібні: назва переноситься на кілька
   рядків повністю, висота рядка підлаштовується під неї. */
.hh-x-forecast-name-cell__label {
  display: block; white-space: normal; word-break: break-word; line-height: 1.3;
}

/* Заголовок групи «Вид товару» (п.9) — інший, помітний фон рядка,
   найвищий рівень групування таблиці. Уточнено 15.09.2026 (сьомий
   раунд): рядок групи тепер несе підсумкові клітинки (Σ + кожна
   подієва колонка, screen-x-analytics.js renderForecastGroupRow), тому
   товарна й Σ-клітинки лишаються приклеєними зліва
   (.hh-x-forecast-sticky-col--name/--sum) під час горизонтального
   скролу так само, як у звичайного рядка товару — попередній
   `position: static` тут навмисно прибрано (раніше скасовував
   стійкість, бо єдина клітинка групи йшла суцільним colspan без класу
   sticky-col узагалі, зараз клітинки типізовані так само, як у рядку
   товару). Специфічність `.hh-x-forecast-group-row td` (клас+елемент)
   вища за `.hh-x-forecast-sticky-col` (один клас), тому фон групи
   виграє над фоном sticky-колонки навіть для приклеєних клітинок. */
.hh-x-forecast-group-row td {
  background: var(--surface-hover); font-weight: var(--weight-medium);
  font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}

/* «Огляд» туру (instruction-x-tour-equipment.md §1). Було три колонки
   (мокап .grid3 = 1fr 1.5fr 1fr): «Потребує уваги» | «Найближчі події» |
   довідка й керування. Власник, 30.09.2026: ліві два блоки — один під
   одним, однією широкою колонкою (спершу «Потребує уваги», під ним
   «Найближчі події»), права колонка — без змін. Тому дві колонки, і права
   рівно тієї самої ширини, що була третьою з трьох: (100% − 2 gap) / 3.5 —
   саме стільки давав їй 1fr із 1fr 1.5fr 1fr, тож ні вміст, ні ширина
   правої не зсуваються. Ліва забирає решту (обидва колишні стовпчики разом
   із gap між ними). До 1024px — одна колонка у DOM-порядку: «Потребує
   уваги» → «Найближчі події» → права колонка. */
.hh-tour-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: start;
  margin-bottom: var(--sp-4);
}
@media (min-width: 1024px) {
  .hh-tour-overview { grid-template-columns: minmax(0, 1fr) calc((100% - 2 * var(--sp-4)) / 3.5); }
}
.hh-tour-overview__col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Рядок-дія в картці «Керування» (мокап .act-btn): назва, підпис, стрілка.
   Не кнопка з заливкою — тонований hover, як решта рядків списків.

   Клас навішується і на <a> (перехід), і на <button> (дія без переходу,
   напр. «Звіт про залишки», ADR 0020 крок 1/Б, data-x-event-stocktake-open):
   для <a> UA не додає жодних фонових стилів, тому їх довго не було видно.
   Для <button> вони є типово (buttonface, рамка з фасками) — без явного
   скидання button-рядок лишався світлою коробкою на темній темі. Скидаємо
   тут явно, а не покладаємось на «немає стилю за замовчуванням». */
.hh-actrow {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 11px 0; border: 0;
  border-top: var(--border-w) solid var(--border-faint);
  background: none; appearance: none; -webkit-appearance: none;
  color: inherit; text-decoration: none; font: inherit; text-align: left; cursor: pointer;
}
/* :first-child, не :first-of-type — список змішує <a> і <button>, і
   «немає верхньої лінії» стосується першого РЯДКА списку, а не першого
   рядка КОЖНОГО тегу окремо (інакше єдиний <button> у списку <a> завжди
   лишався б без розділювача, хоч би де стояв). */
.hh-actrow:first-child { border-top: 0; }
.hh-actrow:hover { background: var(--surface-hover); }
.hh-actrow b { display: block; font-size: 12.5px; }
.hh-actrow span { font-size: 11px; color: var(--text-sub, var(--muted)); }

/* ==========================================================================
   «КЕРУВАННЯ» ПОДІЇ — РЯДОК КНОПОК З ПІКТОГРАМАМИ (.hh-evctl)
   design/screen-x-event.js renderControl/ctlBtn. Власник, 06.10.2026:
   «винесемо горизонтально в лінію кнопочками з піктограмками».
   Плитка = .hh-btn .hh-btn--secondary (рамка, hover, радіус — як усі
   кнопки CORE), лише розкладка інша: іконка над коротким словом, щоб 4
   кнопки влазили в один ряд і у вузькій правій колонці, і на телефоні
   (343px корисної ширини = 4 × ~80px). auto-fit сам переносить зайве в
   наступний ряд — горизонтального скролу сторінки немає. Повна назва дії
   — у title/aria-label. Ціль дотику ≥ --touch.
   ========================================================================== */
.hh-evctl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: var(--sp-2);
  min-width: 0;
}
.hh-evctl__btn {
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 64px;
  padding: var(--sp-2) 6px;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  white-space: normal;
  text-align: center;
}
.hh-evctl__btn svg {
  flex: none;
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.hh-evctl__label { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .hh-evctl { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
  .hh-evctl__btn { min-height: 60px; }
}
/* ========================== /.hh-evctl ================================== */

/* --------------------------------------------------------------------------
   Коментар акта роялті — ТРЕТІЙ рядок рядка списку актів (рішення власника
   17.09.2026). Рядок малюється, лише коли коментар є (design/
   screen-artists.js renderActsBlock), тому тут немає правил «порожній —
   сховати»: порожнього вузла просто не існує.

   Курсив відрізняє ЛЮДСЬКУ нотатку від двох рядків над нею, які є
   фактами системи (назва проєкту, період і суми). Колір — --text-muted,
   той самий, що вже несе .hh-list__meta: коментар це ДАНІ, а --text-faint
   у tokens.css прямо позначений «НЕ для даних» (плейсхолдер, вимкнене).
   Текст вільний і буває довгим — переносимо його, а не обрізаємо: обрізаний
   коментар гірший за перенесений, бо приховує саме те, заради чого його
   писали.
   -------------------------------------------------------------------------- */
.hh-act-comment {
  font-style: italic;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Опис складу акту в рядку списку (власник 03.10.2026): «Концерти:
   Запоріжжя, Київ», «Шоурум, сайт — 188 документів». Факт системи, не
   нотатка людини — тому без курсиву; сервер тримає його коротким (до ~80
   символів), але на телефоні він переноситься, а не обрізається. */
.hh-act-description {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   ФАКТИ БЛОКУ — щільна сітка «підпис : значення» (.hh-facts).
   Блок «Про подію» на лендінгу події (design/screen-x-event.js) був
   вертикальним списком .hh-list з підписом ЗВЕРХУ й значенням ЗНИЗУ: два
   рядки й рамка на кожне поле, тринадцять полів — пів екрана телефона на
   те, що читається за секунду (власник, 19.09.2026: «втричі менше місця»).

   Колонки — auto-fit від ШИРИНИ КОНТЕЙНЕРА, не від ширини вікна: блок
   живе у вузькій колонці 40% (.hh-home-split), і медіазапит по вікну дав
   би дві колонки по 180px там, де їх нема куди поставити. Мінімум
   треку — БІЛЬШЕ з двох: 220px і половина контейнера. Звідси рівно два
   стани, третього не буває: вужче ~456px (телефон, вузька колонка) —
   один стовпчик, ширше — два. Без «половини» auto-fit нарізав би на
   широкій картці чотири стовпчики, і «2 — нижче, у «Документи й
   витрати»» ламалось би на три рядки. Довгі поля («Коли», «Де») беруть
   усю ширину самі (--wide).

   Рамки на кожному рядку немає (дизайн-код 2 і §11.4 інструкції
   замовлення): роздільник — одна тонка лінія --border-faint, як у
   .hh-kv-row. Значення переноситься, а не обрізається: адреса й назва
   майданчика — це те, заради чого рядок і читають.
   -------------------------------------------------------------------------- */
.hh-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(220px, (100% - var(--sp-4)) / 2), 1fr));
  column-gap: var(--sp-4);
}
.hh-facts__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); min-width: 0;
  padding: 4px 0;
  /* Лінія ЗВЕРХУ, не знизу: у два стовпчики останній рядок буває
     неповним, і `:last-child` зняв би її лише з правого елемента —
     під лівим лишався б обрубок над відступом картки. Зверху ж
     достатньо зняти лінію з першого елемента: «Коли» й «Де» займають
     усю ширину (--wide), тож перший візуальний рядок — це рівно один
     елемент. */
  border-top: 1px solid var(--border-faint);
  font-size: 12.5px;
}
.hh-facts__row:first-child { border-top: none; }
.hh-facts__row--wide { grid-column: 1 / -1; }
.hh-facts__k { color: var(--text-muted); flex: none; }
.hh-facts__v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* Адреса під назвою місця — дані, тому --text-muted, а не --text-faint
   (tokens.css: faint «НЕ для даних»). */
.hh-facts__sub {
  display: block;
  font-size: 11px; line-height: var(--lh-caption);
  color: var(--text-muted);
}
/* Пояс біля часу — підпис, а не окреме поле: дрібніший і тихіший. */
.hh-facts__tz { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* --- Маркетинг → Сьогодні: двоколонковий екран (22.09.2026) ---------------
   Ліва — стрічка, права — зведення «Новий сайт». Одна колонка до 1024px:
   на телефоні права колонка йде ПІД основною й не ламає верстку. Поріг
   1024px, а не 768px: стрічка з аватаркою, датою й менеджерами під
   двома колонками на планшеті лишалась би завузькою. `minmax(0, …)` — щоб
   довге ім'я не розпирало грід. */
.hh-mkt-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 1024px) {
  .hh-mkt-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.hh-mkt-site { display: flex; flex-direction: column; gap: var(--sp-3); }
.hh-mkt-site__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.hh-mkt-site__links { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-mkt-site__links .hh-btn { text-decoration: none; justify-content: center; }

/* Права колонка «Кампанії в роботі» (Маркетинг → Сьогодні). */
.hh-mkt-split__side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hh-mkt-camps { display: flex; flex-direction: column; gap: var(--sp-3); }
.hh-mkt-camps__links { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-mkt-camps__links .hh-btn { text-decoration: none; justify-content: center; }
.hh-mkt-camps__list { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.hh-mkt-camps__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-mkt-camps__title { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.hh-mkt-camps__flow { color: var(--text-muted); overflow-wrap: anywhere; }
.hh-mkt-camps__due--late { color: var(--danger, #b3261e); font-weight: 600; }
.hh-mkt-camps__more { text-decoration: none; justify-content: center; }

/* Права колонка «Коментарі у соцмедіа» (30.09.2026): рядок на канал —
   назва зі значком, числа окремим рядком (на 375px «сьогодні N · за 7 днів
   M» поруч із назвою не вміщалось би), «без відповіді» — підписом під ними.
   Непорожнє «без відповіді» — токен уваги (--warn), не danger: нічого не
   зламалось, просто чекають. */
.hh-mkt-social { display: flex; flex-direction: column; gap: var(--sp-3); }
.hh-mkt-social__list { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.hh-mkt-social__row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-mkt-social__name { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--text); }
.hh-mkt-social__icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
.hh-mkt-social__icon svg { width: 100%; height: 100%; }
.hh-mkt-social__nums { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hh-mkt-social__nums b { color: var(--text); font-weight: 600; }
.hh-mkt-social__open--attn { color: var(--warn); font-weight: 600; }

/* --- Маркетинг → Сьогодні → «Соцмедіа» і «Контент і реклама» (30.09.2026) --
   design/screen-mkt-social.js, design/social-post-card.js. Масштаб — за
   01-rules/instruction-design-scale.md: число в плитці 19px/700 (не більше),
   мітка 10px uppercase, gap 9px, картка 13px 14px. Тон зміни: зелений —
   зростання, теракотовий — падіння (статусні кольори, не заливка вибору).

   ТЕЛЕФОН (<1024px — поріг .hh-mkt-split): обгортки колонок стають
   display:contents, блоки — плоскими дітьми одного стовпчика, і order
   ставить «Що потребує уваги» перед «Опубліковано»; решта блоків згорнута
   під кнопкою-заголовком (.is-open розгортає). На десктопі кнопки-заголовка
   немає, тіло завжди видно. */
.hh-soc { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.hh-soc-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-soc-head__row { gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; }
.hh-soc-dim { display: flex; flex-direction: column; gap: 2px; min-width: 160px; flex: 1 1 160px; max-width: 260px; }
.hh-soc-sort { gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-2); }
.hh-soc-subtabs { margin-bottom: var(--sp-3); }

.hh-soc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.hh-soc-tile {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 11px 13px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
}
.hh-soc-tile__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.hh-soc-tile__value { font-size: 19px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hh-soc-tile__foot { font-size: 11px; line-height: 1.35; }
.hh-soc-delta { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.hh-soc-delta--up { color: var(--ok); }
.hh-soc-delta--down { color: var(--danger); }
.hh-soc-warn { color: var(--danger); font-weight: 600; }
.hh-soc-acc { margin-left: var(--sp-1); }
.hh-soc-accounts { gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.hh-soc-notice { padding: var(--sp-4); margin-top: var(--sp-3); }
.hh-soc-byacc { margin-top: var(--sp-3); padding: var(--sp-3); }
.hh-soc-byacc__scroll { overflow-x: auto; }
.hh-soc-byacc__t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hh-soc-byacc__t th, .hh-soc-byacc__t td { padding: var(--sp-1) var(--sp-2); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.hh-soc-byacc__t th:first-child, .hh-soc-byacc__t td:first-child { text-align: left; }
.hh-soc-byacc__t td[colspan] { text-align: left; white-space: normal; }

.hh-soc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; align-items: start; }
.hh-soc-main, .hh-soc-side { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
@media (min-width: 1024px) {
  .hh-soc-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.hh-soc-block { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.hh-soc-block__toggle {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  border: none; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--text); text-align: left;
}
.hh-soc-block__chev { transition: transform var(--dur, .15s); color: var(--text-muted); }
.hh-soc-block.is-open .hh-soc-block__chev { transform: rotate(90deg); }
@media (max-width: 1023px) {
  .hh-soc-split { display: flex; flex-direction: column; }
  .hh-soc-main, .hh-soc-side { display: contents; }
  .hh-soc-block--attention { order: 1; }
  .hh-soc-block--published { order: 2; }
  .hh-soc-block--fold { order: 3; }
  .hh-soc-block--fold .hh-soc-block__toggle { display: flex; min-height: 40px; }
  .hh-soc-block--fold .hh-soc-block__title { display: none; }
  .hh-soc-block--fold:not(.is-open) .hh-soc-block__body { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hh-soc-block__chev { transition: none; } }

.hh-soc-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
/* 626: похідне й службове поруч із метою поста — «артист: X» (від
   колекції), «авто · за текстом «…»» — сірим текстом, не чипом-вимогою. */
.hh-soc-derived { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
/* Пропозиція прив'язки — кнопка-чип (той самий --info, що пропозиція в
   «Комунікаціях»: підказка, не помилка). 32px — палець на телефоні. */
.hh-soc-suggests { margin-top: 2px; }
.hh-soc-suggest { cursor: pointer; min-height: 32px; font: inherit; font-size: 11.5px; }
.hh-soc-suggest:disabled { opacity: .6; cursor: default; }
.hh-soc-posts { display: flex; flex-direction: column; }
.hh-soc-post {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 9px 0; cursor: pointer;
  border-top: var(--border-w) solid var(--border-faint);
}
.hh-soc-post:first-child { border-top: none; }
.hh-soc-post:hover { background: var(--surface-hover); }
.hh-soc-post:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hh-soc-post__thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-sunken); }
.hh-soc-post__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hh-soc-post__text {
  font-size: 12.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hh-soc-post__line { font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hh-soc-win b { font-weight: 600; }

.hh-soc-best-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; }
.hh-soc-best { list-style: decimal; margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.hh-soc-best__item {
  display: flex; gap: 6px; justify-content: space-between; width: 100%; border: none; background: none; padding: 2px 0;
  font: inherit; font-size: 12px; text-align: left; cursor: pointer; color: var(--text);
}
.hh-soc-best__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hh-soc-best__v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.hh-soc-attn { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-soc-attn__row { display: flex; flex-direction: column; gap: 3px; padding-left: 9px; border-left: 3px solid var(--danger); }
.hh-soc-attn__title { color: var(--danger); font-weight: 600; font-size: 12.5px; }
.hh-soc-attn__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.hh-soc-attn__list b { font-variant-numeric: tabular-nums; }
.hh-soc-linkbtn { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }

.hh-soc-chart { width: 100%; height: 120px; display: block; }
.hh-soc-chart--sm { height: 90px; }
.hh-soc-chart__a, .hh-soc-chart__p0 { stroke: var(--accent); }
.hh-soc-chart__b, .hh-soc-chart__p1 { stroke: var(--ok); }
.hh-soc-chart__p2 { stroke: var(--warn); }
.hh-soc-chart__legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hh-soc-chart__key::before { content: ""; display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; background: currentColor; }
.hh-soc-chart__key--a, .hh-soc-chart__key--p0 { color: var(--accent); }
.hh-soc-chart__key--b, .hh-soc-chart__key--p1 { color: var(--ok); }
.hh-soc-chart__key--p2 { color: var(--warn); }
.hh-soc-profs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.hh-soc-prof { display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }

/* Календар: тон запису за типом — тоновані фони, не заливка. */
.hh-soc-cal .hh-soc-cal--post { background: var(--info-quiet); border-color: var(--info-border); color: var(--text); }
.hh-soc-cal .hh-soc-cal--ad { background: var(--ok-quiet); border-color: var(--ok-border); color: var(--text); }
.hh-soc-cal .hh-soc-cal--adstop { background: var(--surface-sunken); border-color: var(--border); color: var(--text-muted); }
.hh-soc-cal .hh-soc-cal--col { background: var(--warn-quiet); border-color: var(--warn-border); color: var(--text); }

/* Картка поста (поп-ап). */
.hh-modal.hh-soc-modal { max-width: 720px; }
.hh-soc-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-soc-card .hh-section-title { margin-top: var(--sp-3); }
.hh-soc-card__head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.hh-soc-card__media { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.hh-soc-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hh-soc-card__caption { font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.hh-soc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 9px; }
.hh-soc-kv__v { font-size: 15px; font-variant-numeric: tabular-nums; }
.hh-soc-edit { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-soc-found { max-height: 180px; overflow-y: auto; margin-top: 4px; }
.hh-soc-found .hh-list__item { width: 100%; text-align: left; border: none; background: none; font: inherit; cursor: pointer; }
.hh-soc-x { border: none; background: none; padding: 0 2px; font: inherit; cursor: pointer; color: var(--text-muted); }
@media (max-width: 767px) {
  .hh-soc-card__head { grid-template-columns: 72px minmax(0, 1fr); }
  .hh-soc-card__media { width: 72px; height: 72px; }
  .hh-soc-dim { max-width: none; }
}

/* Компактне сповіщення «N речей того самого дня»: менше відступів і кегль. */
.hh-banner--compact { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); font-size: var(--size-caption); line-height: var(--lh-caption); }

/* Згортання (акордеон сповіщення про неповноту сайту, Маркетинг → Сьогодні). */
.hh-mkt-past__toggle {
  width: 100%; text-align: left; cursor: pointer; border: none; background: none;
  padding: 0; font: inherit; font-weight: var(--weight-medium); color: var(--text);
}
.hh-mkt-past__toggle { padding: var(--sp-1) 0; font-size: var(--size-small); }

/* Лінки вікна стрічки «← Попередні 7 днів» (зверху) / «Наступні 7 днів →»
   (знизу), Маркетинг → Сьогодні. Зона натиску не менша за 44px на телефоні. */
.hh-mkt-window { display: flex; }
.hh-mkt-window--prev { margin-bottom: var(--sp-2); }
.hh-mkt-window--next { margin-top: var(--sp-2); justify-content: flex-end; }
.hh-mkt-window .hh-link { min-height: 44px; padding: 0 var(--sp-1); font-size: var(--size-small); }

/* Щільна картка стрічки «Маркетинг → Головна» (22.09.2026). Специфічність
   .hh-list__item.hh-feed-row перебиває min-height/padding базового рядка і
   `a.hh-list__item`, не чіпаючи інші списки. Мобільний: аватар | текст, дата
   і менеджери під текстом; десктоп: третя колонка праворуч. */
.hh-list__item.hh-feed-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--sp-2);
  row-gap: 0; align-items: center; min-height: 0; padding: var(--sp-2) var(--sp-3);
}
.hh-feed-row .hh-avatar { grid-row: 1 / span 2; align-self: center; } /* розмір аватара — базовий .hh-avatar (32px), не змінюємо */
.hh-feed-row__body { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.hh-feed-row__title { font-weight: var(--weight-medium); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-feed-row__sub, .hh-feed-row__meta { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.hh-feed-row__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-feed-row__meta { grid-column: 2; }
@media (min-width: 768px) {
  .hh-list__item.hh-feed-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .hh-feed-row .hh-avatar { grid-row: 1; }
  .hh-feed-row__meta { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
}

/* --------------------------------------------------------------------------
   РЯДОК ЗАВДАННЯ — КОМПАКТНИЙ, ЛИШЕ ДЛЯ ЧИТАННЯ (власник, 26.09.2026;
   design/tasks-shared.js rowHtml) — Головна, «Мій день», блок на картці.

   Доти рядок ніс дії (взяти в роботу / виконано / строк / скасувати) і
   мусив переноситись у кілька ярусів: на телефоні одне завдання займало
   пів екрана. Тепер дій у рядку немає — вони в поп-апі (.hh-task-dialog
   нижче), і рядок повертається до одного ритму списку: назва одним рядком
   (обрізана трьома крапками, повна — у поп-апі), під нею — чіпи статусу й
   важливості, строк і сутність; праворуч — виконавець, якщо це не я.

   ВИСОТА — не 60px базового .hh-list__item, а щільна (§4 дизайн-коду:
   рядок списку 6–9px по вертикалі): завдань на Головній п'ять, і вони
   стоять над усіма іншими секціями. Специфічність 0,2,0 перебиває базовий
   рядок, до `button.hh-list__item` (0,1,1) не доходить — рядок <div>.

   КЛІКАБЕЛЬНИЙ ЯК ЦІЛЕ: role="button", tabindex="0", Enter/пробіл
   відкривають поп-ап (wireActions). Посилання на сутність усередині
   лишається посиланням. */
.hh-list__item.hh-task-row {
  min-height: 0;
  padding: var(--sp-2) var(--sp-3);
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
}
.hh-task-row .hh-list__body { flex: 1 1 auto; min-width: 0; gap: 3px; }
.hh-task-row .hh-list__title { font-size: 12.5px; }
.hh-task-row .hh-list__trail { flex: 0 0 auto; max-width: 30%; display: flex; justify-content: flex-end; }
/* ВИКОНАВЕЦЬ ЗЛІВА, АВТОР СПРАВА (власник, 26.09.2026). Лівий слот —
   лише там, де виконавець не я (tasks-shared.js rowHtml); правий — завжди
   автор (людина або спокійна позначка «CORE»). */
.hh-task-row__lead { flex: 0 0 auto; max-width: 30%; min-width: 0; display: flex; }
.hh-task-row__core { flex: 0 0 auto; }
.hh-task-row__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2);
  font-size: var(--size-small); color: var(--text-muted); min-width: 0;
}
.hh-task-row__meta .hh-list__meta { font-size: inherit; }
.hh-task-row__due { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Прострочене — червоним і словом «прострочено», не лише кольором. */
.hh-task-row__due--late { color: var(--danger); font-weight: 600; }
.hh-task-row:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
/* Телефон: рядок лишається одним рядком «виконавець — текст — автор»,
   а люди по краях стають вузькими стовпчиками «аватар над іменем» (ім'я
   дрібно, з трикрапкою): так і ліва, і права сторона видно, а текст
   завдання не стискається до кількох літер. Назва одним рядком — повна
   в поп-апі. */
@media (max-width: 767px) {
  .hh-list__item.hh-task-row { gap: var(--sp-2); flex-wrap: nowrap; }
  .hh-task-row .hh-list__body { flex: 1 1 auto; min-width: 0; }
  .hh-task-row .hh-list__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hh-task-row__lead, .hh-task-row .hh-list__trail { max-width: 64px; }
  .hh-task-row__lead .hh-task-row__who,
  .hh-task-row .hh-list__trail .hh-task-row__who { flex-direction: column; gap: 2px; margin-top: 0; max-width: 64px; }
  .hh-task-row__lead .hh-task-row__who .hh-list__meta,
  .hh-task-row .hh-list__trail .hh-task-row__who .hh-list__meta { font-size: 11px; max-width: 64px; text-align: center; }
}

/* КОМПАКТНИЙ РЯДОК ЗАВДАННЯ — ЛИШЕ ГОЛОВНА (власник, 29.09.2026: «54
   задачі займає увесь екран»; design/tasks-shared.js compactRowHtml).
   Десктоп — один ярус ~40px: [аватар виконавця] назва… · статус ·
   важливість · строк · сутність [аватар автора]. Назва забирає вільне
   місце й обрізається «…» першою (flex-basis 0 + min-width), метадані —
   своєю шириною, але не більше 60% рядка, і сутність у них обрізається
   сама. Люди — аватаром 24px (.hh-avatar--sm) без імені: ім'я в .hh-sr.
   Специфічність 0,3,0 — перебиває і .hh-list__item.hh-task-row, і
   телефонні правила звичайного рядка вище, не чіпаючи їх для «Мого дня». */
.hh-list__item.hh-task-row.hh-task-row--compact {
  padding: 7px var(--sp-3);
  gap: var(--sp-2);
  flex-wrap: nowrap;
}
.hh-task-row--compact .hh-task-row__main {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-3);
}
.hh-task-row--compact .hh-task-row__title {
  flex: 1 1 0; min-width: 6em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px; line-height: 1.35;
}
.hh-task-row--compact .hh-task-row__meta {
  flex: 0 1 auto; max-width: 60%; min-width: 0;
  flex-wrap: nowrap; overflow: hidden; gap: var(--sp-2);
}
/* Хто стискається першим, коли місця бракує: сутність (flex-shrink 100),
   потім строк — обидва з «…», а не обрізані посеред дати; чіпи — ніколи. */
.hh-task-row--compact .hh-task-row__meta > .hh-chip { flex: 0 0 auto; }
.hh-task-row--compact .hh-task-row__due {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.hh-task-row--compact .hh-task-row__meta > .hh-list__meta {
  flex: 0 100 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-task-row--compact .hh-task-row__who { margin-top: 0; gap: 0; }
/* СТАТУС — ПЕРША КОЛОНКА ФІКСОВАНОЇ ШИРИНИ (власник, 29.09.2026): лівіше за
   назву й за аватар виконавця. Ширина — під найдовший підпис («Скасоване»)
   чіпа --sm, тож назви в стовпчику починаються з однієї вертикалі, хоч
   який статус; якщо шрифт ширший — підпис обрізається «…», а не штовхає
   назву. */
.hh-task-row--compact .hh-task-row__status {
  flex: 0 0 var(--hh-task-status-w, 84px); width: var(--hh-task-status-w, 84px);
  min-width: 0; display: flex; align-items: center;
}
.hh-task-row--compact .hh-task-row__status > .hh-chip {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
}
.hh-task-row--compact .hh-task-row__lead,
.hh-task-row--compact .hh-list__trail { flex: 0 0 auto; max-width: none; }
/* ТЕЛЕФОН — ЖОДНОГО ОБРІЗАННЯ ЗМІСТУ (власник, 29.09.2026, скрін з iPhone
   ~390pt: «Не видно задачі на мобільному, обрізає»). Попередній варіант
   тримав рядок у двох ярусах коштом змісту: назва «…», строк
   «прострочено: 27-09-202(» обрізаний посеред дати, прив'язка зведена до
   «Т.»/«Корпо…», а колонка статусу 72px і аватар справа з'їдали ширину.

   Тепер рядок — три яруси сіткою, і назва отримує ВСЮ ширину рядка:
     1. меташапка: статус · аватар виконавця (якщо не я) … аватар автора;
     2. назва — переноситься скільки треба, без «…»;
     3. важливість · строк · прив'язка — з переносом (flex-wrap): строк
        ніколи не обрізається, прив'язка, що не влізла, переходить на свій
        рядок і там переноситься словами, а не стискається до літери.
   Десктопні nowrap / ellipsis / overflow: hidden на назві, строку,
   прив'язці й метаданих тут ЯВНО скасовано: без скасування вони
   каскадом діяли б і на телефоні (сторож —
   tests/design-home-tasks-compact.test.js). Горизонтального скролу
   немає: колонка змісту minmax(0, 1fr), довгі слова — overflow-wrap:
   anywhere. .hh-task-row__main — display: contents, назва й метадані
   стають клітинками сітки рядка. */
@media (max-width: 767px) {
  .hh-list__item.hh-task-row.hh-task-row--compact {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: 0; row-gap: 4px; align-items: center;
    padding: 8px var(--sp-3);
  }
  .hh-task-row--compact .hh-task-row__main { display: contents; }
  .hh-task-row--compact .hh-task-row__status { grid-column: 1; grid-row: 1; width: auto; flex: none; margin-right: var(--sp-2); }
  .hh-task-row--compact .hh-task-row__lead { grid-column: 2; grid-row: 1; margin-right: var(--sp-2); }
  .hh-task-row--compact .hh-list__trail { grid-column: 4; grid-row: 1; margin-left: var(--sp-2); }
  .hh-task-row--compact .hh-task-row__title {
    grid-column: 1 / -1; grid-row: 2; min-width: 0;
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    font-size: 13px; line-height: 1.35;
  }
  .hh-task-row--compact .hh-task-row__meta {
    grid-column: 1 / -1; grid-row: 3; max-width: none; min-width: 0;
    flex-wrap: wrap; overflow: visible; gap: 2px var(--sp-2); line-height: 1.35;
  }
  .hh-task-row--compact .hh-task-row__status > .hh-chip {
    max-width: none; overflow: visible; text-overflow: clip; white-space: normal;
  }
  .hh-task-row--compact .hh-task-row__due {
    flex: 0 1 auto; min-width: 0;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .hh-task-row--compact .hh-task-row__meta > .hh-list__meta {
    flex: 0 1 auto; min-width: 0;
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    line-height: 1.35;
  }
  /* Базовий телефонний .hh-list__trail (width: 100%, відступ зліва,
     margin-top — «хвіст під текстом») тут не підходить: хвіст компактного
     рядка — лише аватар 24px у меташапці. */
  .hh-task-row--compact .hh-task-row__lead,
  .hh-task-row--compact .hh-list__trail { max-width: none; width: auto; padding-left: 0; margin-top: 0; }
}
/* «Ще N · Усі в «Мій день»» — у ШАПЦІ блоку (ліворуч від «+ Нове
   завдання») і в шапці «Доручено іншим» (притиснуто праворуч), не окремим
   рядком під списком (власник, 29.09.2026). На телефоні, коли заголовок і
   дії не влазять в один рядок, дії переносяться під заголовок цілим
   блоком (flex-wrap шапки .hh-myday-block__head). */
.hh-home-tasks__head-actions {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-left: auto; min-width: 0;
}
.hh-home-tasks__rest { white-space: nowrap; }
.hh-home-tasks__from-me-head { flex-wrap: wrap; }
.hh-home-tasks__from-me-head .hh-overline { white-space: nowrap; }
.hh-home-tasks__from-me-head .hh-home-tasks__rest { margin-left: auto; }

/* Поп-ап завдання (design/tasks-shared.js dialogHtml) — базовий
   hh-overlay/hh-modal §9; тут лише внутрішня розкладка. Факти — дві
   колонки «підпис — значення», як сайдбар картки; історія — хронологія з
   аватаркою автора дії. */
.hh-task-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.hh-task-dialog__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.hh-task-dialog__text { margin: 0 0 var(--sp-3); white-space: pre-line; overflow-wrap: anywhere; }
.hh-task-dialog__facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-3);
  align-items: center; margin-bottom: var(--sp-4); font-size: 12.5px;
}
.hh-task-dialog__fact { display: contents; }
.hh-task-dialog__label { color: var(--text-muted); font-size: 11px; }
.hh-task-dialog__value { min-width: 0; }
.hh-task-dialog__foot { flex-wrap: wrap; }
/* «Скасувати» — другорядне й окремо від основної дії: ліворуч. */
.hh-task-dialog__cancel { margin-right: auto; }
.hh-task-history { border-top: var(--border-w) solid var(--border-faint); padding-top: var(--sp-3); }
.hh-task-history__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hh-task-history__item { display: flex; gap: var(--sp-2); align-items: flex-start; }
.hh-task-history__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.hh-task-history__what { color: var(--text-muted); overflow-wrap: anywhere; }

/* Форма завдання (постановка й «Змінити», власник 26.09.2026).
   «Подробиці» — ~5 рядків одразу, далі поле росте за вмістом
   (autoGrow у design/tasks-shared.js) до max-height і лише тоді
   прокручується; руками тягнеться по вертикалі (resize з .hh-textarea). */
.hh-textarea.hh-task-body { min-height: calc(5 * 1.4em + 2 * var(--sp-2)); max-height: 360px; overflow-y: auto; }
/* Строк: дата + необов'язкова година в один рядок, плашки під ними. */
.hh-task-due__inputs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hh-task-due__date { flex: 1 1 150px; width: auto; }
.hh-task-due__time { flex: 0 1 120px; width: auto; }
.hh-task-due__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Плашки — компактні чипи в гамі блоку завдань (§6.1, --task-*), а не
   акцентні фільтри: це підказка строку, не вимір списку. Обрана — залита
   тоном тексту блоку, щоб читалась і без кольору (aria-pressed). */
.hh-task-due__chip {
  min-height: 28px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12px;
  background: var(--task-surface); border-color: var(--task-border); color: var(--task-text);
}
.hh-task-due__chip:hover { border-color: var(--task-text-muted); }
.hh-task-due__chip[aria-pressed="true"] {
  background: var(--task-text); border-color: var(--task-text); color: var(--task-surface); font-weight: 600;
}
.hh-task-due__chip:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
/* .hh-error — flex, і без цього правила атрибут hidden його не ховав би. */
.hh-task-due__error[hidden] { display: none; }
@media (max-width: 767px) {
  .hh-task-dialog__cancel { margin-right: 0; }
}

/* «Виконані (N)» — закриті завдання згорнуті під посиланням (власник,
   28.09.2026; design/tasks-shared.js closedFoldHtml). Один вигляд на
   Головній, у «Моєму дні» й у блоці на картці сутності. Перемикач —
   button.hh-link (без тла й рамки, вище у файлі) з видимим трикутником
   стану, а не hover: на телефоні наведення немає. Висота 32px — щоб
   у полі в нього влучав палець, а не лише курсор. */
.hh-tasks-closed { margin-top: var(--sp-3); }
.hh-tasks-closed__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  font-size: var(--size-small); color: var(--text-muted);
}
.hh-tasks-closed__toggle:hover { color: var(--text); }
.hh-tasks-closed__toggle:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.hh-tasks-closed__chev { display: inline-block; width: 1em; font-size: 1.15em; line-height: 1; text-align: center; text-decoration: none; }
.hh-tasks-closed__body { margin-top: var(--sp-1); }
.hh-tasks-closed__note { margin: 0 0 var(--sp-1); }
.hh-tasks-closed__more { margin-top: var(--sp-2); }
.hh-tasks-closed--error { color: var(--danger); }

/* Головна: підблок «Доручено іншим» під «Моїми завданнями»; лічильник —
   поруч із підписом, а не на протилежному краї. */
.hh-home-tasks__from-me { margin-top: var(--sp-3); }
.hh-home-tasks__from-me-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.hh-home-tasks__from-me-head .hh-overline { margin: 0; }

/* Власний фон блоку «Завдання» (власник, 26.09.2026) — .hh-tasks-surface
   ставить СПІЛЬНИЙ рендер (design/tasks-shared.js SURFACE_CLASS) на картці
   будь-якої сутності й на обох блоках «Мого дня»; кабінет тур-менеджера —
   той самий колір у своїх токенах (public/tour-portal/index.html
   .blk--tasks). «Морська хвиля», не жовтий: жовтий зарезервований під
   «увагу» (--warn). Правило — docs/01-rules/instruction-design-scale.md §6.1.
   Селектор з .hh-card (0,2,0), щоб перебити базовий .hh-card і
   контекстні `.hh-home .hh-card` без !important.
   Текстові токени підміняються ВСЕРЕДИНІ блоку тонами з тієї самої гами
   (--task-text*): блок читається одним кольором, а звичайний faint на
   цьому фоні був би нижче AA для підпису завдання.
   Список усередині — прозорий, межі — --task-border: блок читається одним
   тоном, а не білою карткою в кольоровій рамці. */
.hh-card.hh-tasks-surface {
  background: var(--task-surface);
  border-color: var(--task-border);
  --text: var(--task-text);
  --text-muted: var(--task-text-muted);
  --text-faint: var(--task-text-faint);
  /* Явно: body уже розв'язав --text у свій колір, і успадкований текст
     без цього лишився б загальним, а не з гами блоку. */
  color: var(--task-text);
}
.hh-tasks-surface .hh-list { background: transparent; border-color: var(--task-border); }
.hh-tasks-surface .hh-list__item { border-bottom-color: var(--task-border); }
.hh-tasks-surface .hh-list__item:last-child { border-bottom: 0; }
/* Рядок завдання клікабельний (відкриває поп-ап) — hover тонований
   кольором блоку, а не білим --surface-hover базового списку. */
.hh-tasks-surface .hh-list__item:hover { background: transparent; }
.hh-tasks-surface .hh-list__item.hh-task-row:hover { background: color-mix(in srgb, var(--task-border) 45%, transparent); }

/* Слот «Завдання» на картці сутності (власник, 26.09.2026; правило —
   docs/01-rules/instruction-design-scale.md §6.1). HH_TASKS.renderEntitySlot
   малює блок ОКРЕМОЮ коміркою сітки картки, першою в DOM; контейнер сітки —
   `.hh-with-tasks`, основна колонка — `.hh-with-tasks__main`, сайдбар —
   `.hh-with-tasks__side` (картка товару ще має `.hh-doc-rest` під основним).

   Телефон / одна колонка: правил немає — DOM-порядок «завдання → основне →
   сайдбар» і є порядком на екрані, блок завдань угорі одразу після шапки.
   Відступ до сусідів — gap контейнера, той самий, що між рештою комірок:
   блок не тримає власного margin і не залежить від margin сусіда (саме
   відсутність inline margin-top у блоку завдань, коли сусіди його мали,
   і склеювала «Роздати безкоштовно» з «Завданнями» на картці події).

   Дві колонки: слот — правий стовпчик, рядок 1; сайдбар — під ним; основне —
   на обидва рядки ліворуч. Рядки `auto 1fr`: основне, вище за завдання,
   віддає надлишок висоти рядку сайдбару (він гнучкий), а не рядку
   завдань — інакше під завданнями з'являлась би дірка (той самий прийом,
   що `.hh-doc-layout` вище). Поріг — той самий, на якому ЦЯ сітка стає
   двоколонковою: правила без медіазапиту створили б на телефоні неявний
   другий стовпчик. */
.hh-tasks-slot { min-width: 0; }
.hh-tasks-slot > .hh-card { margin: 0; }
/* Колонка з карток (картка події: ліва й права колонки) — відступ між
   картками дає gap колонки, а не margin кожної: картки без власного
   margin інакше стоять впритул (так і було з «Готовністю»/«Звітами»/
   «Керуванням» до 26.09.2026). */
.hh-card-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Сторінка без сітки (напр. «Огляд» туру, коли огляд не дорахувався) —
   слот першим у стосі, відступ між блоками — gap, як у сітці. */
.hh-tasks-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.hh-tasks-stack > * { margin-top: 0; margin-bottom: 0; }
.hh-with-tasks__main, .hh-with-tasks__side, .hh-with-tasks__lead { min-width: 0; }

/* Картка події, клієнта — .hh-home-split, дві колонки від 1200px. */
@media (min-width: 1200px) {
  .hh-home-split.hh-with-tasks { grid-template-rows: auto 1fr; }
  .hh-home-split.hh-with-tasks > .hh-tasks-slot       { grid-column: 2; grid-row: 1; }
  .hh-home-split.hh-with-tasks > .hh-with-tasks__main { grid-column: 1; grid-row: 1 / span 2; }
  .hh-home-split.hh-with-tasks > .hh-with-tasks__side { grid-column: 2; grid-row: 2; }
}

/* Картка клієнта — ще одна комірка правої колонки між «Завданнями» й
   сайдбаром: `.hh-with-tasks__lead` (Портрет → Взаєморозрахунки → Контакти;
   власник, 28.09.2026). Окремою коміркою, а не початком сайдбару, бо на
   телефоні порядок — це DOM: «завдання → портрет/контакти → замовлення →
   роль/комунікації/лояльність». На десктопі: lead — правий стовпчик, рядок 2;
   сайдбар — рядок 3; основне — на всі три рядки ліворуч; гнучкий (1fr) —
   останній рядок, як і в базовому правилі вище. Модифікатор .hh-with-lead —
   щоб сітки без lead (картка події) не отримали порожнього рядка з gap. */
@media (min-width: 1200px) {
  .hh-home-split.hh-with-tasks.hh-with-lead { grid-template-rows: auto auto 1fr; }
  .hh-home-split.hh-with-tasks.hh-with-lead > .hh-with-tasks__lead { grid-column: 2; grid-row: 2; }
  .hh-home-split.hh-with-tasks.hh-with-lead > .hh-with-tasks__main { grid-column: 1; grid-row: 1 / span 3; }
  .hh-home-split.hh-with-tasks.hh-with-lead > .hh-with-tasks__side { grid-column: 2; grid-row: 3; }
}

/* Картка замовлення — .hh-order-layout; корпоративний проєкт —
   .hh-corp-home. Обидві — дві колонки від 900px. */
.hh-corp-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 900px) {
  .hh-corp-home { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
  .hh-order-layout.hh-with-tasks,
  .hh-corp-home.hh-with-tasks { grid-template-rows: auto 1fr; }
  .hh-order-layout.hh-with-tasks > .hh-tasks-slot,
  .hh-corp-home.hh-with-tasks > .hh-tasks-slot       { grid-column: 2; grid-row: 1; }
  .hh-order-layout.hh-with-tasks > .hh-with-tasks__main,
  .hh-corp-home.hh-with-tasks > .hh-with-tasks__main { grid-column: 1; grid-row: 1 / span 2; }
  .hh-order-layout.hh-with-tasks > .hh-with-tasks__side,
  .hh-corp-home.hh-with-tasks > .hh-with-tasks__side { grid-column: 2; grid-row: 2; }
  /* Картка товару — .hh-doc-layout: під основним ще «Технічні дані»
     (.hh-doc-rest), тому три рядки. Основне — рядки 1–2, сайдбар — 2–3,
     rest — рядок 3 ліворуч; гнучкий лише останній. Специфічність (0,3,0)
     перебиває базові правила .hh-doc-layout > … (0,2,0). */
  .hh-order-layout.hh-doc-layout.hh-with-tasks { grid-template-rows: auto auto 1fr; }
  .hh-order-layout.hh-doc-layout.hh-with-tasks > .hh-with-tasks__main { grid-column: 1; grid-row: 1 / span 2; }
  .hh-order-layout.hh-doc-layout.hh-with-tasks > .hh-with-tasks__side { grid-column: 2; grid-row: 2 / span 2; }
  .hh-order-layout.hh-doc-layout.hh-with-tasks > .hh-doc-rest         { grid-column: 1; grid-row: 3; }
}

/* «Огляд» туру — .hh-tour-overview, дві колонки від 1024px: слот — правий
   стовпчик, рядок 1; ліва колонка («Потребує уваги» + «Найближчі події»)
   — на два рядки; права колонка — під слотом. */
@media (min-width: 1024px) {
  .hh-tour-overview.hh-with-tasks { grid-template-rows: auto 1fr; }
  .hh-tour-overview.hh-with-tasks > .hh-tasks-slot       { grid-column: 2; grid-row: 1; }
  .hh-tour-overview.hh-with-tasks > .hh-with-tasks__main { grid-column: 1; grid-row: 1 / span 2; }
  .hh-tour-overview.hh-with-tasks > .hh-with-tasks__side { grid-column: 2; grid-row: 2; }
}

/* Аватар виконавця в рядку завдання — 28px (власник: «не дуже дрібна»,
   28–32px): між 24px рядка таблиці (.hh-avatar--sm) і 32px списку
   користувачів, щоб рядок завдання на телефоні не ріс. Рядок «аватар +
   ім'я» — власний flex, а не хвіст підрядка строку. */
.hh-avatar--task { width: 28px; height: 28px; font-size: 11px; }
.hh-task-row__who { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; min-width: 0; }
.hh-task-row__who .hh-list__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* КОМАНДА-ВИКОНАВЕЦЬ — стос аватарок учасників (594, власник 30.09.2026;
   design/tasks-shared.js teamStackHtml). Той самий розмір, що аватар
   людини в цьому місці (28px рядок/поп-ап, 24px компактний рядок
   Головної); кружечки перекриваються, щоб 4 + «+N» не розпирали рядок.
   Обвідка кожного — колір фону блоку завдань, щоб межа між сусідами
   читалась в обох темах. Хто «Взяв» — першим і з обвідкою акцентом
   --task-text (не лише кольором: у тексті поруч — «взяв(ла): Ім'я»). */
.hh-avatar-stack { display: inline-flex; align-items: center; flex: none; }
.hh-avatar-stack__item {
  box-shadow: 0 0 0 2px var(--task-surface, var(--surface));
  position: relative;
}
.hh-avatar-stack__item + .hh-avatar-stack__item { margin-left: -10px; }
.hh-avatar--sm.hh-avatar-stack__item + .hh-avatar-stack__item { margin-left: -8px; }
.hh-avatar-stack__item--taken {
  box-shadow: 0 0 0 2px var(--task-surface, var(--surface)), 0 0 0 4px var(--task-text, var(--accent));
  z-index: 1;
}
.hh-avatar-stack__more {
  background: var(--surface-hover, var(--surface));
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hh-task-row__who--team { min-width: 0; }
.hh-task-dialog__team { margin-left: var(--sp-2); }
/* Телефон, звичайний рядок: лівий стовпчик людини — 64px; стос із п'яти
   кружечків (4 + «+N») у нього не влазить, тож для команди стовпчик трохи
   ширший і перекриття щільніше — рядок не розпирається (перевірено на
   375px). */
@media (max-width: 767px) {
  .hh-task-row__lead.hh-task-row__lead--team,
  .hh-task-row__lead--team .hh-task-row__who,
  .hh-task-row__lead--team .hh-task-row__who .hh-list__meta { max-width: 84px; }
  .hh-task-row__lead--team .hh-avatar--task.hh-avatar-stack__item + .hh-avatar-stack__item { margin-left: -14px; }
}

/* ВУЗЬКИЙ БЛОК «ЗАВДАННЯ» — ЗА ШИРИНОЮ СВОГО МІСЦЯ, НЕ ВІКНА (власник,
   скрін 03.10.2026, права колонка туру «Klavdia 2026»). Блок на картці
   сутності стоїть у правому стовпчику ~320px навіть на широкому моніторі,
   тож телефонний @media (max-width: 767px) вище там не спрацьовував, і
   звичайний рядок лишався трьома колонками «виконавець | текст | автор»:
     • назва обрізалась до двох слів («Відправити Договір т…») — колонці
       тексту лишалось ~150px;
     • строк (white-space: nowrap) не вміщався в цю колонку й вилазив під
       аватар автора праворуч: «прострочено: 03-10-202[аватар]5:00»;
     • ім'я автора в стовпчику 30% — «Ро…».
   Тому картка блоку — container (inline-size), і в контейнері ≤ 480px
   звичайний рядок стає СІТКОЮ з двох ярусів, у кожної частини своя
   grid-area:
     1. body — назва переноситься (до 3 рядків, далі «…» — повна в
        поп-апі), під нею з переносом: статус · важливість · строк ·
        прив'язка («Тур: Klavdia 2026»);
     2. lead / trail — люди ОКРЕМИМ ярусом: виконавець ліворуч, автор
        праворуч, аватар 20px поруч з іменем, а не над ним.
   Аватар ніде не позиціонується поверх тексту: він у своїй клітинці
   сітки, строк — у своїй, і перетнутись вони не можуть.
   Рядок щільніший (власник того ж дня: «картка менша, менше порожнечі»):
   відступи 6px 10px (§4 дизайн-коду — рядок списку 6–9px), проміжки 2–4px.
   Компактний рядок Головної (.hh-task-row--compact) має свою сітку й сюди
   не потрапляє (:not). Широкий блок (> 480px) — без змін.
   Сторож — tests/design-task-row-narrow.test.js. */
.hh-card.hh-tasks-surface { container: hh-tasks / inline-size; }
.hh-card.hh-tasks-surface[data-tasks-block] { padding: 13px 14px; }
.hh-card.hh-tasks-surface[data-tasks-block] > .hh-section-head { margin-bottom: var(--sp-2); align-items: center; }
/* «+ Завдання» у шапці блоку — коротка кнопка (tasks-shared.js
   renderEntityBlock): вужчий горизонтальний відступ, підпис не
   переноситься. Висоту не чіпаємо — .hh-btn--sm лишається ціллю дотику. */
.hh-tasks-add { padding: 0 10px; white-space: nowrap; }

/* ── КОМПАКТНИЙ БЛОК ЗАВДАНЬ (власник, 06.10.2026) ───────────────────────
   «Блок завдань має займати всюди менше місця, особливо коли порожній»
   (скріншот картки товару на телефоні: порожній блок — пів екрана).
   Спільний рендер (design/tasks-shared.js renderEntityBlock) — тож одна
   зміна на всіх картках: товар, замовлення, клієнт, тур, подія, корп. проєкт.
     * Шапка .hh-tasks-head: назва + чип-лічильник (або тихий підпис
       «Завдань немає») ліворуч, мала ghost «+ Завдання» праворуч — один ряд.
     * Порожній (data-tasks-state="empty") — лише ця шапка: тісний padding,
       без нижнього відступу; фон той самий м'ятний (власник 06.10.2026).
     * Непорожній — щільніші рядки й менший шрифт назви.
   Ціль дотику кнопки (.hh-btn--sm, --touch) не чіпаємо. Сторож —
   tests/design-tasks-block-compact.test.js. */
.hh-card.hh-tasks-surface[data-tasks-block] > .hh-tasks-head { flex-wrap: nowrap; gap: var(--sp-2); }
.hh-tasks-head__title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); min-width: 0; }
.hh-tasks-head__title > h3 { margin: 0; font-size: var(--size-body); line-height: var(--lh-body); }
.hh-tasks-head__note { white-space: nowrap; }
.hh-tasks-surface .hh-btn--ghost.hh-tasks-add:hover:not(:disabled) { background: color-mix(in srgb, var(--task-border) 45%, transparent); }
.hh-card.hh-tasks-surface[data-tasks-block] { padding: 10px 12px; }
.hh-card.hh-tasks-surface[data-tasks-block] .hh-list__item.hh-task-row { padding-top: 6px; padding-bottom: 6px; }
.hh-card.hh-tasks-surface[data-tasks-block] .hh-task-row .hh-list__title { font-size: var(--size-small); line-height: var(--lh-small); }
.hh-card.hh-tasks-surface[data-tasks-block] .hh-tasks-closed { margin-top: var(--sp-2); }
.hh-card.hh-tasks-surface[data-tasks-state="empty"] {
  /* Фон лишається м'ятним, як у непорожнього (власник 06.10.2026: «попередній
     морська хвиля був краще»); компактність — лише відступи. */
  padding-top: 4px;
  padding-bottom: 4px;
}
.hh-card.hh-tasks-surface[data-tasks-state="empty"] > .hh-tasks-head { margin-bottom: 0; }
.hh-card.hh-tasks-surface[data-tasks-state="empty"] > .hh-tasks-closed { margin-top: 0; margin-bottom: 4px; }
/* ── /КОМПАКТНИЙ БЛОК ЗАВДАНЬ ── */
@container hh-tasks (max-width: 480px) {
  .hh-tasks-surface .hh-list__item.hh-task-row:not(.hh-task-row--compact) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "body body" "lead trail";
    column-gap: var(--sp-2); row-gap: 4px;
    align-items: center;
    padding: 6px 10px;
  }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) > .hh-list__body { grid-area: body; gap: 2px; min-width: 0; }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-list__title {
    white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    line-height: 1.3;
  }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-task-row__meta { gap: 2px 6px; line-height: 1.3; }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-task-row__due { white-space: normal; min-width: 0; }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-task-row__meta > .hh-list__meta { min-width: 0; overflow-wrap: anywhere; }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) > .hh-task-row__lead {
    grid-area: lead; justify-self: start; max-width: 100%; min-width: 0;
  }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) > .hh-list__trail {
    grid-area: trail; justify-self: end; max-width: 100%; min-width: 0;
    width: auto; padding-left: 0; margin-top: 0;
  }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-task-row__who {
    flex-direction: row; gap: 6px; margin-top: 0; max-width: 100%;
  }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-task-row__who .hh-list__meta {
    font-size: 11px; max-width: none; text-align: left;
  }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-avatar--task { width: 20px; height: 20px; font-size: 9px; }
  .hh-tasks-surface .hh-task-row:not(.hh-task-row--compact) .hh-avatar--task.hh-avatar-stack__item + .hh-avatar-stack__item { margin-left: -7px; }
}

/* «Мій день» — дві колонки (власник, 26.09.2026, design/screen-my-day.js).
   Ліва — завдання (два блоки один під одним), права — «Мої дані».
   Один стовпчик до 900px — той самий поріг, що .hh-order-layout: між
   планшетом і десктопом права колонка в 280px лишила б завданням менше за
   ширину телефона. На телефоні профіль іде ПІСЛЯ завдань (порядок у DOM):
   заради завдань екран і відкривають. */
.hh-myday-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 900px) {
  .hh-myday-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
.hh-myday-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hh-myday-side { min-width: 0; }
.hh-myday-block { padding: 13px 14px; }
.hh-myday-block__head { align-items: center; flex-wrap: wrap; }
/* Заголовок блоку — 15px без капсу (instruction-design-scale.md §3,
   «великі картки»), лічильник поруч, а не окремою колонкою. */
.hh-myday-block__title {
  font-size: 15px; font-weight: 700; margin: 0;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.hh-myday-group + .hh-myday-group { margin-top: var(--sp-3); }

/* Фільтри — один компактний рядок, підпис ПОРУЧ із полем (не над ним):
   рядок чипового розміру (§4 — 7px/11px), а не картка з формою. */
.hh-myday-filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.hh-myday-filter { display: inline-flex; align-items: center; gap: 6px; }
.hh-myday-filter .hh-select {
  width: auto; min-height: 30px; padding: 4px 28px 4px 9px; font-size: 12px;
  background-position: right 13px center, right 8px center;
}
/* Телефон: чотири фільтри в рядок не вміщаються, а по одному в рядку
   з'їдають пів екрана до першого завдання. Тому сітка 2×2, підпис над
   полем. Кегль поля — 16px: iOS збільшує сторінку на фокусі поля з
   дрібнішим (той самий аргумент, що в базовому .hh-select). */
@media (max-width: 767px) {
  .hh-myday-filters { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .hh-myday-filter { flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
  .hh-myday-filter .hh-select { width: 100%; font-size: 16px; }
}

/* «Мої дані». Аватар більший за шапку власної сторінки (--lg, 56px):
   тут він — головний елемент картки, а не деталь рядка. */
.hh-avatar--xl { width: 88px; height: 88px; font-size: 30px; }
.hh-myday-profile {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); text-align: center; padding: 13px 14px;
}
.hh-myday-profile .hh-overline { align-self: flex-start; }
.hh-myday-profile__name { font-size: 15px; font-weight: 700; margin: 0; }
.hh-myday-profile__link { margin-top: var(--sp-2); align-self: stretch; justify-content: center; }

/* Реєстри «Закупівлі» (design/screen-purchasing.js, 27.09.2026) — ті самі
   мобільні картки .hh-docs-status-group, що «Усі продажі» (класи комірок
   hh-docs-cell--*), лише без колонки часу: у замовлення постачальнику й
   накладної є лише дата, а вона вже заголовок групи. Тому документ займає
   дві третини першого рядка, а другий статус (виконання / замовлення-
   основа) — дві третини третього. */
@media (max-width: 767px) {
  .hh-purch-table tbody tr.hh-table__row--clickable {
    grid-template-areas:
      "doc doc amount"
      "client client client"
      "so sp sp";
  }
  .hh-purch-table .hh-docs-cell--status-payment .hh-link { display: block; text-align: center; font-size: 10px; }
  .hh-purch-filters:not(.is-open) { display: none; }
}

/* Друк акту звіряння (screen-reconciliation-act.js) — лише таблиця акту:
   шапка, бічне меню й кнопки ховаються, поки на <html> клас друку. */
@media print {
  html.hh-printing-act .hh-topbar,
  html.hh-printing-act .hh-sidebar,
  html.hh-printing-act .hh-no-print { display: none !important; }
  /* Шапки застосунку на папері немає — і відступу під неї теж. */
  html.hh-printing-act .hh-reconciliation-table thead th { position: static; }
  /* Папір — завжди ТАБЛИЦЯ, не картки (власник 03.10.2026, друк з
     телефона: «друк акту геть не ок»). Сторінка друку вужча за 768px
     (А4 мінус поля ≈ 700px), тож @media (max-width: 767px) і @container
     спрацьовували й на папері — кожна операція ставала карткою на пів
     аркуша. Тут повертаємо табличну розкладку всім .hh-table--responsive
     акту, лише на час друку (клас на <html> ставить ra-print). */
  html.hh-printing-act .hh-table--responsive { display: table; width: 100%; }
  html.hh-printing-act .hh-table--responsive thead { display: table-header-group; }
  html.hh-printing-act .hh-table--responsive tbody { display: table-row-group; }
  html.hh-printing-act .hh-table--responsive tfoot { display: table-footer-group; }
  html.hh-printing-act .hh-table--responsive tr,
  html.hh-printing-act .hh-table--responsive tfoot tr { display: table-row; padding: 0; box-shadow: none; }
  html.hh-printing-act .hh-table--responsive td,
  html.hh-printing-act .hh-table--responsive tfoot td {
    display: table-cell; width: auto; padding: 4px 6px; text-align: left;
    border-bottom: var(--border-w) solid var(--border-faint); font-size: 10pt;
  }
  html.hh-printing-act .hh-table--responsive td:empty { display: table-cell; }
  html.hh-printing-act .hh-table--responsive th { padding: 4px 6px; font-size: 8pt; }
  html.hh-printing-act .hh-table--responsive td.hh-td--num { text-align: right; white-space: nowrap; }
  html.hh-printing-act .hh-table--responsive td::before { content: none; display: none; }
  html.hh-printing-act .hh-table--responsive tr { break-inside: avoid; page-break-inside: avoid; }
  html.hh-printing-act .hh-reconciliation-table-wrap { border: 0; }
  /* Власник 03.10.2026 (скрін друку): на аркуші були вкладки «Гроші»,
     «← Назад», чіпи періоду, «Інший контрагент», нижня панель і «?»,
     посилання підкреслені, а таблиця крупна. На папері — лише акт. */
  html.hh-printing-act .hh-nav-back,
  html.hh-printing-act .hh-ask-core-fab,
  html.hh-printing-act .hh-tabbar,
  html.hh-printing-act .hh-subbar { display: none !important; }
  html.hh-printing-act a { color: inherit !important; text-decoration: none !important; }
  html.hh-printing-act .hh-reconciliation-table { font-size: 8.5pt; }
  html.hh-printing-act .hh-table--responsive th { font-size: 7pt; padding: 3px 5px; }
  html.hh-printing-act .hh-table--responsive td,
  html.hh-printing-act .hh-table--responsive tfoot td { font-size: 8.5pt; padding: 3px 5px; }
  html.hh-printing-act .hh-h1 { font-size: 14pt; }
}

/* --------------------------------------------------------------------------
   Друкована форма «Акт роялті» (design/screen-royalty-act-print.js, власник
   30.09.2026). На екрані — аркуш на поверхні з тією ж типографікою, що
   решта CORE (дизайн-код §3/§4: th 10px uppercase, td 12.5px). На папері —
   А4, чорно-біле: без навігації, кнопок, тіней і тонованих фонів; таблиці
   не рвуть рядок документа між сторінками.
   -------------------------------------------------------------------------- */
.hh-rprint {
  background: var(--surface); border: var(--border-w) solid var(--border-faint);
  border-radius: var(--radius); padding: 24px 28px; max-width: 900px; color: var(--text);
  font-size: 12.5px; line-height: 1.45;
}
.hh-rprint__head { margin-bottom: 14px; }
.hh-rprint__title { font-size: 20px; font-weight: 400; margin: 0; }
.hh-rprint__period { margin: 2px 0 0; color: var(--text-muted); }
.hh-rprint__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.hh-rprint__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-faint); font-weight: 600; margin-bottom: 2px;
}
.hh-rprint__party-name { font-weight: 600; }
.hh-rprint__muted { color: var(--text-muted); font-size: 11.5px; }
.hh-rprint__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.hh-rprint__warn { border-left: 3px solid var(--warn); padding: 6px 10px; margin: 6px 0 0; }
.hh-rprint__h2 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
.hh-rprint__h3 { font-size: 12.5px; font-weight: 600; margin: 14px 0 4px; }
.hh-rprint__kv { border-collapse: collapse; margin-bottom: 6px; }
.hh-rprint__kv th {
  text-align: left; font-weight: 400; color: var(--text-muted); padding: 2px 16px 2px 0; vertical-align: top;
}
.hh-rprint__kv td { padding: 2px 0; }
.hh-rprint__table { width: 100%; border-collapse: collapse; }
.hh-rprint__table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint);
  font-weight: 600; text-align: left; padding: 6px 8px; border-bottom: var(--border-w) solid var(--border);
}
.hh-rprint__table td { padding: 5px 8px; border-bottom: var(--border-w) solid var(--border-faint); vertical-align: top; }
.hh-rprint__table tfoot td { font-weight: 600; border-top: var(--border-w) solid var(--border); border-bottom: 0; }
.hh-rprint__num { text-align: right; white-space: nowrap; }
.hh-rprint__nowrap { white-space: nowrap; }
.hh-rprint__table th.hh-rprint__num { text-align: right; }
.hh-rprint__group td { font-weight: 600; padding-top: 8px; }
.hh-rprint__item td, .hh-rprint__sub td { font-size: 11.5px; color: var(--text-muted); padding-left: 22px; }
.hh-rprint__item td.hh-rprint__num, .hh-rprint__sub td.hh-rprint__num { padding-left: 8px; }
.hh-rprint__diff td { color: var(--danger); }
/* Підсумок «за оплатою» / «за каналами» — дві колонки, не на всю ширину аркуша. */
.hh-rprint__table--summary { max-width: 520px; margin-bottom: 6px; }
.hh-rprint__signs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.hh-rprint__sign-line { border-top: var(--border-w) solid var(--border-strong); margin-top: 26px; padding-top: 2px; font-size: 10.5px; color: var(--text-faint); }

/* Телефон: сторони й підписи — стовпчиком, таблиця документів гортається
   всередині аркуша, а не сторінка вбік. */
@media (max-width: 767px) {
  .hh-rprint { padding: 14px 12px; }
  .hh-rprint__parties, .hh-rprint__signs { grid-template-columns: 1fr; }
  .hh-rprint__scroll { overflow-x: auto; }
}

@media print {
  @page { size: A4; margin: 12mm 10mm; }
  /* Палітра паперу для ВСІХ друкованих форм (власник 05.10.2026, друк
     видаткової: «нічого не видно»). Типова тема CORE — темна (:root у
     tokens.css), тож без цього акт звірки на аркуші друкувався молочним
     текстом на білому, а у світлій темі — бежевими підписами (#93826f),
     що лазерний принтер робить ледь видимими. [data-theme] у селекторі —
     щоб перебити [data-theme="light"] за специфічністю. */
  html.hh-print-page, html.hh-print-page[data-theme] {
    --bg: #fff; --surface: #fff; --surface-raised: #fff; --surface-sunken: #fff;
    --surface-hover: #fff; --surface-active: #fff;
    --text: #000; --text-muted: #333; --text-faint: #444;
    --border: #555; --border-strong: #333; --border-faint: #999;
  }
  html.hh-print-page body { color: #000; background: #fff; }
  html.hh-print-page .hh-topbar,
  html.hh-print-page .hh-sidebar,
  html.hh-print-page .hh-tabbar,
  html.hh-print-page .hh-subbar,
  html.hh-print-page .hh-footer,
  html.hh-print-page .hh-page-banner,
  html.hh-print-page #demoBar,
  html.hh-print-page #demoStripe,
  html.hh-print-page .hh-ask-core-fab,
  html.hh-print-page .hh-no-print { display: none !important; }
  html.hh-print-page, html.hh-print-page body,
  html.hh-print-page .hh-shell, html.hh-print-page .hh-shell__main, html.hh-print-page .hh-page {
    background: #fff !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important;
  }
  html.hh-print-page .hh-rprint {
    border: 0; border-radius: 0; padding: 0; max-width: none; box-shadow: none; color: #000; font-size: 10.5pt;
  }
  html.hh-print-page .hh-rprint * { color: #000 !important; box-shadow: none !important; background: transparent !important; }
  html.hh-print-page .hh-rprint__table th,
  html.hh-print-page .hh-rprint__table td { border-color: #000 !important; }
  html.hh-print-page .hh-rprint__table td { border-bottom-color: #999 !important; }
  html.hh-print-page .hh-rprint__scroll { overflow: visible; }
  html.hh-print-page .hh-rprint__table tr { break-inside: avoid; page-break-inside: avoid; }
  /* Аркуш А4 вужчий за екран (~720px проти ~1000px) — на 10,5pt рядки
     акту переносились у два рядки (власник 03.10.2026: «при друці — щоб
     так само, як на екрані, все поміщалось»). Таблиці — дрібніше й
     щільніше; шапка документа лишається 10,5pt. */
  html.hh-print-page .hh-rprint__table { font-size: 8.5pt; }
  html.hh-print-page .hh-rprint__table th { font-size: 7pt; padding: 4px 5px; }
  html.hh-print-page .hh-rprint__table td { padding: 3px 5px; }
  html.hh-print-page .hh-rprint__item td, html.hh-print-page .hh-rprint__sub td { font-size: 8pt; padding-left: 14px; }
  html.hh-print-page .hh-rprint__table thead { display: table-header-group; }
  html.hh-print-page .hh-rprint__h3 { break-after: avoid; page-break-after: avoid; }
  html.hh-print-page .hh-rprint__signs { break-inside: avoid; page-break-inside: avoid; }
  html.hh-print-page .hh-rprint__warn { border-left-color: #000 !important; }
}

/* --------------------------------------------------------------------------
   Наскрізний P&L (design/pnl-shared.js, screen-pnl.js; instruction-pnl-
   engine.md §7). Масштаб — дизайн-код §3/§4: h1 20/400, th 10px uppercase,
   td 12.5px і 9px 12px, найбільше число 19px (тут — жодного крупнішого за
   14px). Підсумки — лінія зверху й тонований фон, не суцільна заливка
   (§2: заливка --choco лишається лише разовим неінтерактивним акцентом, а
   підсумкових рядків на екрані кілька). Клітинка суми — клікабельна
   (бічна панель документів), тому курсор і hover на рядку.
   -------------------------------------------------------------------------- */
.hh-pnl-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hh-pnl-h1 { font-size: 20px; font-weight: 400; margin: 0; }
.hh-pnl-filters { padding: 13px 14px; margin-bottom: var(--sp-3); }
.hh-pnl-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.hh-pnl-frow:last-child { margin-bottom: 0; }
.hh-pnl-flbl {
  width: 92px; flex: 0 0 auto; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-faint); font-weight: 600;
}
.hh-pnl-rnote { margin-left: 4px; }
/* Обраний чип — тонований фон і рамка --choco, НЕ суцільна заливка
   (дизайн-код §2.1/§7.2). Спільний .hh-chip--filter[aria-pressed] досі
   заливає акцентом — це розбіжність усього застосунку, винесена окремо;
   тут екран уже відповідає правилу. */
.hh-pnl-filters .hh-chip--filter { padding: 7px 11px; font-size: 12px; background: var(--surface-hover); }
.hh-pnl-filters .hh-chip--filter[aria-pressed="true"] {
  /* color-mix, не зафіксований rgba: той самий тон має читатись і в темній
     темі (прийом .hh-stepline--active). */
  background: color-mix(in srgb, var(--surface-brand) 10%, var(--surface));
  border-color: var(--text); color: var(--text); font-weight: 600;
}
.hh-pnl-custom { display: inline-flex; align-items: center; gap: 6px; }
.hh-pnl-custom .hh-input { width: 150px; padding: 5px 9px; font-size: 12px; }
.hh-pnl-picker {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start;
  margin-top: 8px; padding: 10px; border: var(--border-w) dashed var(--border);
  border-radius: var(--radius); background: var(--surface-sunken);
}
.hh-pnl-picker .hh-select { width: 160px; }
.hh-pnl-picker .hh-input { flex: 1 1 200px; min-width: 0; }
.hh-pnl-picker__results { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.hh-pnl-picker__item {
  border: var(--border-w) solid var(--border); background: var(--surface);
  border-radius: var(--radius-full); padding: 5px 11px; font-size: 12px; cursor: pointer; color: var(--text);
}
.hh-pnl-picker__item:hover { background: var(--surface-hover); }

/* Таблиця місяців: на вузькому екрані гортається сама таблиця, а не
   сторінка; перша колонка лишається на місці. */
.hh-pnl-wrap { overflow-x: auto; margin-bottom: var(--sp-3); }
.hh-pnl-table { min-width: 100%; }
/* Висота рядка ~36px (дизайн-код §4/§7.4): 9px + 17px + 9px + лінія. */
.hh-pnl-table td { line-height: 1.35; }
/* Колонка статей (власник 30.09.2026) — ФІКСОВАНА ширина, приблизно
   половина колишньої: раніше `nowrap` + довгі бейджі («не розкладається за
   «…»», «— не в P&L, доки немає статті») розтягували її на ~400px і
   з'їдали місце місяців. Тепер довга назва статті переноситься, а не ширить
   колонку; при горизонтальній прокрутці колонка лишається зліва (sticky). */
.hh-pnl-table th:first-child, .hh-pnl-table td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  width: 184px; min-width: 184px; max-width: 184px;
  white-space: normal; overflow-wrap: break-word;
}
.hh-pnl-table thead th:first-child { z-index: calc(var(--z-sticky) + 1); }
/* «Копійки: ні» — цілі гривні, тож колонки місяців вужчі: мінімальна
   ширина колонки = вміст (на три знаки коротший), менші бічні відступи й
   кегль. Вільне місце (мало місяців) розходиться по колонках місяців, а
   не в колонку статей: у неї ширина задана, у місяців — ні. */
.hh-pnl-table--whole th.hh-th--num, .hh-pnl-table--whole td.hh-td--num {
  padding-left: 3px; padding-right: 5px;
}
/* Свідомий відхід від дизайн-коду §3/§4 (td 12.5px, padding 10–12px) —
   лише в цьому режимі: 13 колонок сум на 7 знаків у 12.5px із
   відступами 12px займають ~1 750px, а робоча ширина на 1440px — ~1 120px.
   10.5px — рівень «дрібний текст» тієї самої шкали (§3: 10.5–11px).
   Сторінка в цьому режимі не обмежена --content-max (на 1920px саме він,
   1 280px, змушував би гортати) і має бічні поля 16px замість 32px.
   Клітинки в цьому режимі — без «₴» (pnl-shared.js tableHtml; валюта —
   у заголовку «суми, ₴»). Виміряно (headless Chrome, рік + «Разом»,
   колонка статей 184px, місячні суми до 4,3 млн ₴, «Разом» до 40 млн ₴):
   1440px — влазить без прокрутки (1 156 із 1 156px), 1600–1920px — із
   запасом. Із «₴» у кожній клітинці на 1440px гортало на ~110px. */
.hh-pnl-cur { text-transform: none; letter-spacing: 0; }
.hh-page:has(.hh-pnl-table--whole) { max-width: none; padding-left: var(--sp-4); padding-right: var(--sp-4); }
/* Підсумковий рядок (--big, 14px) теж — інакше саме він задає ширину
   кожної колонки. Вагу підсумку й далі несе жирний і лінія зверху. */
.hh-pnl-table--whole td.hh-td--num,
.hh-pnl-table--whole .hh-pnl-row--big td.hh-td--num { font-size: 10.5px; }
.hh-pnl-table--whole th.hh-th--num { letter-spacing: 0; }
/* «?» — коротке речення на екрані, повний текст за знаком (<details>:
   тап на телефоні = клік на десктопі; не title). Тіло — в потоці, під
   рядком: у таблиці з overflow спливне вікно обрізалось би. */
.hh-pnl-why { display: inline; }
.hh-pnl-why > summary { list-style: none; }
.hh-pnl-why > summary::-webkit-details-marker { display: none; }
.hh-pnl-why__q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin: -3px 0 -3px 2px; padding: 0; vertical-align: middle;
  border: var(--border-w) solid var(--border-strong); border-radius: 50%;
  font-size: 11px; font-weight: 600; font-style: normal; line-height: 1;
  color: var(--text-muted); background: var(--surface); cursor: pointer;
  position: relative;
}
/* Ціль дотику ~32px на телефоні, хоч сам знак малий. */
.hh-pnl-why__q::after { content: ""; position: absolute; inset: -7px; }
.hh-pnl-why__q:hover { color: var(--text); border-color: var(--text-muted); }
.hh-pnl-why__q:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.hh-pnl-why[open] > .hh-pnl-why__q { color: var(--text); background: var(--surface-hover); }
.hh-pnl-why__body {
  display: block; margin-top: 4px; font-weight: 400; font-style: normal;
  font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted);
  white-space: normal; max-width: 640px; cursor: text;
}
.hh-pnl-why__body ul { margin: 0; padding-left: 18px; }
/* «Зараз на сайті» (site-live-visitors.js): «+ N інших (без згоди на обробку
   даних)» на широкому екрані, «+ N без згоди» на телефоні — повна назва в
   підказці й легенді під списком (власник 11.10.2026). */
.hh-site-live-short { display: none; }
@media (max-width: 599px) {
  .hh-site-live-long { display: none; }
  .hh-site-live-short { display: inline; }
}
/* Плашка P&L — одним рядком тексту: тіло банера за замовчуванням flex-колонка,
   і кожен шматок речення ставав би окремим рядком. */
.hh-pnl-banner .hh-banner__body { display: block; min-width: 0; }
.hh-pnl-kopecks { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.hh-pnl-table th.hh-pnl-total { color: var(--text); }
.hh-pnl-table td.hh-pnl-total { font-weight: 700; background: var(--surface-hover); }
.hh-pnl-row { cursor: pointer; }
.hh-pnl-row:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
.hh-pnl-row--minus td:first-child { color: var(--text-muted); }
.hh-pnl-row--child td:first-child { padding-left: calc(var(--sp-3) + 16px); color: var(--text-muted); font-size: 12px; }
.hh-pnl-row--child td { font-size: 12px; }
/* Група статей (600): підрядок із сумою групи й кнопкою ▸, під нею —
   статті ще на крок глибше. Кнопка — ціль дотику 28px (телефон), не
   крихітна стрілка, і не губить рядок таблиці на 375px. */
.hh-pnl-row--group td:first-child { padding-left: calc(var(--sp-3) + 2px); color: var(--text); font-weight: 600; }
.hh-pnl-row--sub td:first-child { padding-left: calc(var(--sp-3) + 34px); }
.hh-pnl-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -6px 2px -6px -4px; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent;
  color: var(--text-muted); font-size: 12px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.hh-pnl-toggle:hover { background: var(--surface-hover); color: var(--text); }
.hh-pnl-toggle:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
.hh-pnl-table .hh-pnl-row--subtotal td {
  font-weight: 700; border-top: 1.5px solid var(--brand-chocolate, var(--text));
  background: var(--surface-hover);
}
.hh-pnl-table .hh-pnl-row--subtotal td:first-child { background: var(--surface-hover); }
.hh-pnl-table .hh-pnl-row--subtotal td.hh-pnl-total { background: var(--accent-quiet); }
.hh-pnl-table .hh-pnl-row--big td { font-size: 14px; border-top-width: 2px; }
.hh-pnl-table .hh-pnl-row--margin { cursor: default; }
.hh-pnl-table .hh-pnl-row--margin td {
  font-size: 10.5px; color: var(--text-faint); padding-top: 0; padding-bottom: 6px;
}
.hh-pnl-table .hh-pnl-row--margin:hover { background: transparent; }
/* «Некласифіковані витрати» — рядок під звітом, у формулу не входить:
   пунктир зверху й приглушений текст відділяють його від підсумків. */
.hh-pnl-table .hh-pnl-row--info td { border-top: 1.5px dashed var(--border-strong); color: var(--text-muted); }
/* Оцінка роялті без акту (рішення власника 30.09.2026) — не факт, а
   оцінка: курсив, пунктир і приглушений колір відділяють її від сум «за
   актом», а пояснення стоїть текстом під підписом (не в title — на
   телефоні підказки при наведенні немає). У формулу не входить. */
.hh-pnl-table .hh-pnl-row--estimate { cursor: default; }
.hh-pnl-table .hh-pnl-row--estimate td {
  font-style: italic; color: var(--text-muted); border-top: 1px dashed var(--border-strong);
}
.hh-pnl-table .hh-pnl-row--estimate td:first-child { white-space: normal; }
.hh-pnl-table .hh-pnl-row--estimate:hover { background: transparent; }
.hh-pnl-estimate-note { display: block; font-style: normal; font-size: 10.5px; color: var(--text-faint); max-width: 320px; }
.hh-pnl-embed__row--estimate { font-style: italic; color: var(--text-muted); cursor: default; border-top-style: dashed; }
.hh-pnl-embed__row--estimate:hover { background: transparent; }
/* «Лише за підписаними актами» / «лише за документами» — друга цифра під
   підсумком (основна — з оцінками). Це теж прибуток, не витрата (власник,
   12.10.2026: «краще виділити її теж, бо зараз вона як витрати виглядає»):
   підкладка й напівжирне число підсумку, але легше й менше за основний
   підсумок над ним. Не оцінка — без курсиву. */
.hh-pnl-table .hh-pnl-row--acts { cursor: default; }
.hh-pnl-table .hh-pnl-row--acts td {
  font-weight: 600; font-size: 0.92em; color: var(--text-muted);
  background: var(--surface-hover); border-top: var(--border-w) solid var(--border-faint);
}
.hh-pnl-table .hh-pnl-row--acts td:first-child { padding-left: calc(var(--sp-3) + var(--sp-4)); }
.hh-pnl-table .hh-pnl-row--acts td.hh-td--num { color: var(--text); }
.hh-pnl-table .hh-pnl-row--acts td.hh-pnl-total { background: var(--accent-quiet); }
.hh-pnl-table .hh-pnl-row--acts:hover { background: transparent; }
.hh-pnl-embed__row--acts {
  font-weight: 600; font-size: 0.92em; color: var(--text-muted); cursor: default;
  background: var(--surface-hover); padding-left: var(--sp-2); padding-right: var(--sp-2);
}
.hh-pnl-embed__row--acts b { color: var(--text); }
.hh-pnl-embed__row--acts:hover { background: var(--surface-hover); }
/* Зведення над таблицею P&L: Дохід · Усі витрати · Прибуток (12.10.2026). */
.hh-pnl-summary { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.hh-pnl-summary__cell {
  flex: 1 1 8rem; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--surface-hover);
}
.hh-pnl-summary__cell--total { background: var(--accent-quiet); }
.hh-pnl-summary__label { font-size: 0.85em; color: var(--text-muted); }
.hh-pnl-summary__cell b { font-size: 1.15em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-pnl-notes { margin: 0 0 var(--sp-3); }
.hh-pnl-notes li { margin-bottom: 2px; }

/* Компактна версія (блок «Фінанси» туру, картки сутностей). */
.hh-pnl-embed__row {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding: 8px 0; border-top: var(--border-w) solid var(--border-faint);
  font-size: 12px; cursor: pointer;
}
.hh-pnl-embed__row:first-child { border-top: 0; }
.hh-pnl-embed__row:hover { background: var(--surface-hover); }
.hh-pnl-embed__row--sub { font-weight: 700; }
.hh-pnl-embed__row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh-pnl-embed__warn { margin: 6px 0 0; }
/* Під блоком — перемикач «Копійки» (спільний для всіх P&L) і «Повний P&L →». */
.hh-pnl-embed__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px;
  padding-top: 8px; border-top: var(--border-w) solid var(--border-faint);
}
.hh-pnl-embed__foot .hh-pnl-kopecks { margin-left: 0; }
.hh-pnl-embed__foot .hh-chip--filter, .hh-pnl-ctx-bar .hh-chip--filter { padding: 4px 9px; font-size: 11.5px; }
/* Вкладка «P&L» туру/контексту — перемикач над таблицею, праворуч. */
.hh-pnl-ctx-bar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); }
/* Закладка «P&L» артиста (04.10.2026): ліворуч — період, праворуч —
   «Копійки». На телефоні чипи переносяться, а не ширять сторінку. */
.hh-pnl-ctx-bar:has(.hh-pnl-ctx-period) { justify-content: space-between; flex-wrap: wrap; gap: 6px; align-items: center; }
.hh-pnl-ctx-period { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hh-pnl-ctx-period .hh-chip--filter { padding: 4px 9px; font-size: 11.5px; }
.hh-pnl-ctx-period .hh-pnl-custom { display: inline-flex; align-items: center; gap: 6px; }
.hh-pnl-ctx-period .hh-pnl-custom .hh-input { width: 140px; }
/* Розкладка по турах / X-проєктах — під таблицею звіту. */
.hh-pnl-breakdown { margin-top: var(--sp-4); }
.hh-pnl-breakdown__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hh-pnl-breakdown__table tfoot td { font-weight: 700; border-top: var(--border-w) solid var(--border-strong); }
.hh-pnl-breakdown__note { margin: 0 0 var(--sp-3); }
.hh-pnl-embed__foot .hh-link { font-size: 11.5px; font-weight: 600; }

/* Бічна панель документів (§7.2) — справа на десктопі, знизу на телефоні. */
.hh-pnl-drill-ov {
  position: fixed; inset: 0; background: rgba(10, 7, 5, 0.3);
  z-index: var(--z-overlay);
}
.hh-pnl-drill {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%;
  background: var(--surface-raised); box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column; z-index: var(--z-modal);
}
.hh-pnl-drill__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2);
  padding: 14px 16px; border-bottom: var(--border-w) solid var(--border);
}
.hh-pnl-drill__head b { font-size: 14px; }
.hh-pnl-drill__body { flex: 1; overflow-y: auto; }
.hh-pnl-drill__sum {
  display: flex; justify-content: space-between; padding: 10px 16px;
  background: var(--surface-hover); font-size: 12px; border-bottom: var(--border-w) solid var(--border-faint);
}
.hh-pnl-drill__doc {
  display: flex; justify-content: space-between; gap: var(--sp-2); padding: 9px 16px;
  border-bottom: var(--border-w) solid var(--border-faint); font-size: 12px;
}
.hh-pnl-drill__doc .hh-link { font-weight: 600; }
.hh-pnl-drill__doc .hh-num { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Подробиці запису (drill-panel.js detailsHtml): коментар — дві лінії, дотик
   розгортає повністю; під ним — кому · рахунок · автор · джерело · тур. */
.hh-pnl-drill__main { flex: 1; min-width: 0; }
.hh-pnl-drill__note {
  display: block; width: 100%; margin: 3px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.4; color: var(--text); text-align: left;
}
/* Обрізка — на <span> усередині кнопки, не на самій кнопці (line-clamp на
   <button> браузери тримають непослідовно). */
.hh-pnl-drill__note-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere;
}
.hh-pnl-drill__note.is-open .hh-pnl-drill__note-text { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.hh-pnl-drill__facts { margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .hh-pnl-flbl { width: 100%; }
  .hh-pnl-table th:first-child, .hh-pnl-table td:first-child { min-width: 150px; max-width: 170px; white-space: normal; }
  .hh-pnl-drill { top: auto; left: 0; width: 100%; max-height: 85vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* --------------------------------------------------------------------------
   Реєстр «Витрати» (design/screen-expenses.js, власник 29.09.2026: «записи
   геть не подібні на витрати з Finmap»). Опис рядка Finmap буває довгим
   (інколи абзац), і без обмеження він розпирав би рядок у кілька ліній —
   висота рядка таблиці постійна (instruction-design-scale.md §4/§7.4).
   Тому на десктопі стаття й опис — один рядок із трикрапкою (повний текст
   — у картці витрати), а на телефоні (.hh-table--responsive → картка)
   текст переноситься: там висоту рядка ніщо не фіксує, а обрізаний опис
   без наведення не прочитати зовсім. Порожня клітинка «Контрагент» на
   телефоні ховається — інакше кожна картка Finmap несла б підпис без
   значення.
   -------------------------------------------------------------------------- */
.hh-expenses-table .hh-exp-article { white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.hh-expenses-table .hh-exp-desc { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.hh-expenses-table .hh-exp-fx { margin-left: var(--sp-1); white-space: nowrap; }
@media (max-width: 767px) {
  .hh-expenses-table .hh-exp-article,
  .hh-expenses-table .hh-exp-desc { white-space: normal; max-width: none; }
  .hh-expenses-table td:empty { display: none; }
  /* Сума й чип «без перерахунку?» в один рядок на 375px не влазять —
     чип стає під сумою, праворуч, а не вилазить за край картки. */
  .hh-expenses-table .hh-exp-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .hh-expenses-table .hh-exp-fx { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Вікно «Створити ТТН · Нова Пошта» — .hh-modal--ttn / .hh-ttn
   (design/ttn-create-form.js; той самий вміст вбудовує «Створити доставку»).

   Власник, 30.09.2026: «вікно задовге — зменшити поля й текст, щільніше,
   щоб усе влазило в ноутбук 1440×900 без прокрутки; дві колонки
   відправник/отримувач лишаються; мобільний — придатний». Розміри —
   01-rules/instruction-design-scale.md §3–§5: поле 12.5px з відступом
   ~5px 9px, підпис 11px, заголовок картки 11px uppercase, картка 10–12px,
   проміжок сітки 9px. Лише ВСЕРЕДИНІ цього вікна — спільні .hh-input/
   .hh-card інших екранів не чіпаються. На телефоні (<768px) поле лишається
   16px/40px: менше — і iOS зумить сторінку на фокусі (коментар .hh-input).
   -------------------------------------------------------------------------- */
.hh-modal--ttn { max-width: 1040px; max-height: 94vh; }

/* Верх вікна закріплений (живий тест 30.09.2026): центроване по вертикалі
   вікно стрибало щоразу, як підказки під полем з'являлись чи зникали —
   висота змінювалась, центр зсувався, і клік після вводу влучав не туди.
   Тепер росте лише низ. На телефоні вікно — нижній шит на фіксовану
   висоту: інакше тим самим стрибав би його верх. */
.hh-overlay--pinned { align-items: flex-start; padding-top: 3vh; }
.hh-overlay--pinned > .hh-modal { max-height: 94vh; }
@media (max-width: 767px) {
  .hh-overlay--pinned { align-items: flex-end; padding-top: 0; }
  .hh-overlay--pinned > .hh-modal { height: 92vh; max-height: 92vh; }
}

/* Питання «Закрити? Введені дані буде втрачено» поверх вікна ТТН /
   доставки (ttn-create-form.js closeConfirmHtml) — внутрішній діалог
   замість нативного window.confirm, що блокував сторінку. Рівень вище за
   саме вікно. */
.hh-overlay--confirm { z-index: calc(var(--z-overlay) + 1); align-items: center; }
.hh-modal--confirm { max-width: 400px; }
/* Дві довгі дії («Закрити без збереження» / «Продовжити заповнення») ширші
   за 400px в один ряд: з justify-content:flex-end і nowrap ліва кнопка
   вилазила за лівий край діалогу (власник 06.10.2026). Підвал переносить
   кнопки, кнопка не ширша за діалог, текст кнопки може перенестися. */
.hh-modal--confirm .hh-modal__foot { flex-wrap: wrap; }
.hh-modal--confirm .hh-modal__foot .hh-btn {
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  white-space: normal; text-align: center; line-height: 1.25;
}
@media (max-width: 767px) {
  .hh-overlay--confirm { align-items: flex-end; }
}
.hh-modal--ttn .hh-modal__head { padding: 9px 14px; }
.hh-modal--ttn .hh-modal__body { padding: 10px 14px; }
.hh-modal--ttn .hh-modal__foot { padding: 9px 14px; }
.hh-ttn__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hh-ttn__head .hh-h3 { font-size: 15px; }

.hh-ttn { font-size: 12.5px; }
.hh-ttn__top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px; margin-bottom: 9px;
}
.hh-ttn__binding { margin: 0; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.hh-ttn__inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.hh-ttn__inline .hh-label { white-space: nowrap; margin: 0; }
.hh-ttn__inline .hh-input { width: auto; min-width: 190px; }
.hh-ttn .hh-segmented__item { padding: 4px 10px; font-size: 12px; min-height: 28px; }

.hh-ttn__grid { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 9px; }
.hh-ttn__grid:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .hh-ttn__grid { grid-template-columns: 1fr 1fr; }
}
.hh-ttn__card { padding: 10px 12px; border-radius: var(--radius); min-width: 0; }
.hh-ttn__title {
  margin: 0 0 7px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.hh-ttn .hh-field { gap: 3px; margin-bottom: 7px; min-width: 0; }
.hh-ttn .hh-label { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--text-muted); }
.hh-ttn .hh-caption { font-size: 11px; line-height: 15px; }
.hh-ttn__row {
  display: grid; gap: 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-items: end;
}
.hh-ttn__row--pkg { grid-template-columns: 1.3fr 0.8fr 0.6fr 1.5fr; }
@media (max-width: 520px) {
  .hh-ttn__row--pkg { grid-template-columns: 1fr 1fr; }
}
.hh-ttn__chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* Блок «Пакування» (ttn-create-form.js packingHtml, 597): чипи пакувань
   НП з габаритами на чипі + «Свої габарити» → три вузькі поля Д × Ш × В.
   Чипи переносяться рядками — на 375 без горизонтальної прокрутки. */
.hh-ttn__packing-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
.hh-ttn__packing .hh-ttn__chips { margin-top: 2px; }
.hh-ttn__packing .hh-chip { max-width: 100%; white-space: normal; text-align: left; }
.hh-ttn__pack-dims { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hh-ttn__packing .hh-caption { margin: 5px 0 0; }
.hh-ttn__packing-toggle { margin: -2px 0 7px; }
.hh-ttn__dims-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 6px; }
.hh-ttn__dims-row .hh-ttn__dim { width: 64px; flex: 0 0 64px; }
/* Рядки місць (ttn-create-form.js seatsHtml, власник 06.10.2026): «Місце i»
   · вага · Д × Ш × В · об'ємна вага. На 375 габарити переносяться під вагу
   — без горизонтальної прокрутки. */
.hh-ttn__seats { margin-top: 4px; }
.hh-ttn__seat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 6px; }
.hh-ttn__seat-row .hh-ttn__dim { width: 58px; flex: 0 0 58px; }
.hh-ttn__seat-no { min-width: 58px; font-size: 12px; color: var(--text-muted); }
.hh-ttn__seat-dims { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 5px; }
.hh-ttn__seat-vol { margin: 0; white-space: nowrap; }
.hh-ttn__seat-remove { color: var(--danger); min-width: 28px; padding: 2px 6px; margin-left: auto; }
.hh-ttn__seat-add-row { margin: 4px 0 2px; }
/* Одне місце для поштомата/DropOff (ttn-create-form.js singleSeatHtml):
   попередження біля «Кількість місць» і дві дії, переносяться на 375. */
.hh-ttn__single-seat {
  margin-top: 6px; padding: 6px 9px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); border-left: 3px solid var(--warn);
}
.hh-ttn__single-seat-text { margin: 0; color: var(--text); }
.hh-ttn__single-seat-actions { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 6px; }
.hh-ttn__single-seat-actions .hh-btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }
.hh-ttn__single-seat-note { margin: 5px 0 0; }
.hh-ttn__seat-trim {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 6px; padding: 5px 9px;
  background: var(--surface-sunken); border-radius: var(--radius-sm);
}
.hh-ttn__seat-trim .hh-caption { margin: 0; flex: 1 1 180px; }
/* Підказка біля «Створити ТТН»: які місця ще порожні. */
.hh-ttn__foot-hint { order: -1; margin: 0 auto 0 0; align-self: center; color: var(--danger); }
@media (max-width: 520px) {
  .hh-ttn__foot-hint { order: 1; margin: 0; text-align: center; }
}
.hh-ttn .hh-chip--filter { min-height: 26px; padding: 3px 9px; font-size: 12px; }
.hh-ttn__place { margin: -3px 0 7px; }
.hh-ttn__summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 8px; margin: 0 0 7px; padding: 5px 9px;
  background: var(--surface-sunken); border-radius: var(--radius-sm);
}
.hh-ttn__summary-text { min-width: 0; overflow-wrap: anywhere; }
.hh-ttn__sub {
  margin: 0 0 7px; padding: 7px 9px;
  border: var(--border-w) dashed var(--border); border-radius: var(--radius-sm);
}
.hh-ttn__cod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hh-ttn__cod .hh-input { width: 140px; }
.hh-ttn__results {
  max-height: 180px; overflow: auto; margin: -3px 0 7px;
  border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
}
.hh-ttn__results .hh-list__item { min-height: 0; padding: 5px 9px; flex-shrink: 0; }
/* flex-shrink:0 — живий тест 30.09.2026: .hh-list — колонка flex, а цей
   список обмежений по висоті (180px) і прокручується. Без заборони
   стискатись рядки ділили 180px між собою (15 міст — по 12px), текст
   налазив рядок на рядок, і клік влучав не в той рядок. Рядок має свою
   висоту, а зайве прокручується. */
.hh-ttn .hh-btn--sm { min-height: 26px; padding: 3px 9px; font-size: 11.5px; }
@media (min-width: 768px) {
  .hh-ttn .hh-input,
  .hh-ttn .hh-select {
    min-height: 30px; padding: 4px 9px; font-size: 12.5px;
  }
}
/* Обраний чип у вікні ТТН («Звідки», перевізник) — тонований фон, не
   суцільна заливка (instruction-design-scale.md §2.1), той самий прийом,
   що .hh-pnl-filters: у вікні вибір із ряду, а не фільтр реєстру. */
.hh-ttn .hh-chip--filter[aria-pressed="true"] {
  background: color-mix(in srgb, var(--surface-brand) 10%, var(--surface));
  border-color: var(--text); color: var(--text); font-weight: 600;
}

/* ==========================================================================
   Картка-чернетка замовлення (screen-orders.js, рішення власника 30.09.2026):
   «Нове замовлення» — та сама картка в стані «Чернетка». Тут лише те, чого
   бракує картці: степер кількості в рядку, «вільно для продажу» в мета-рядку,
   чипи розмірів підбору, прилипла нижня панель на телефоні.
   Дизайн-код (01-rules/instruction-design-scale.md): обраний стан — тон
   8%, не суцільна заливка (§2.1); рядок таблиці не росте (§4, §7.4) —
   степер 24px вписується в клітинку 35–36px; числа — tabular-nums (§8).
   ========================================================================== */
.hh-draft-block { margin-bottom: var(--sp-4); }
.hh-draft-block .hh-input { margin-top: var(--sp-2); }
.hh-draft-results { margin-top: var(--sp-2); max-height: 320px; overflow-y: auto; }
.hh-draft-newcust .hh-label { margin-top: var(--sp-2); display: block; }
.hh-client-card__change { margin-top: var(--sp-2); }
.hh-draft-np { margin-top: var(--sp-2); }
.hh-draft-np .hh-label { display: block; margin-top: var(--sp-2); }

.hh-qty-stepper { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.hh-qty-stepper__btn {
  width: 24px; height: 24px; padding: 0; line-height: 22px; text-align: center;
  border: 1px solid var(--line, var(--border)); border-radius: var(--radius);
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px;
}
.hh-qty-stepper__btn:hover:not(:disabled) { background: var(--surface-hover); }
.hh-qty-stepper__btn:disabled { opacity: .35; cursor: default; }
.hh-qty-stepper__btn:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 1px; }
.hh-qty-stepper__val { min-width: 22px; text-align: center; }
/* Кількість уже змінено, суми ще рахує сервер — попередні суми приглушені. */
.hh-doc-lines--calc td.hh-table__primary { opacity: .5; transition: opacity .15s; }
.hh-doc-lines__rm { min-height: 24px; padding: 0 8px; }

/* «Вільно для продажу»: «ОС 5/2» — всього / вільно; нуль приглушено, але
   видно (ОС/ПТР/КК завжди). Склад дроп-постачальника — пунктиром: не наш. */
.hh-sale-avail { display: inline; font-variant-numeric: tabular-nums; line-height: inherit; }
.hh-sale-avail__cell { white-space: nowrap; color: var(--text-muted); margin-right: 8px; }
.hh-sale-avail__loc { font-weight: 600; }
.hh-sale-avail__num { color: var(--text); }
.hh-sale-avail__cell--zero, .hh-sale-avail__cell--zero .hh-sale-avail__num { color: var(--text-faint); }
.hh-sale-avail__cell--drop { border: 1px dashed var(--border); border-radius: 9px; padding: 0 6px; }
.hh-sale-avail__more {
  border: 0; background: none; padding: 0; min-height: 0; line-height: inherit; color: var(--accent); cursor: pointer;
  font: inherit; text-decoration: underline dotted;
}

/* Підбір під таблицею: розміри явним текстом «M 6», без надрядкових чисел і
   без залежності від title (на телефоні title не існує). «Уже в
   замовленні» — тон 8% і рамка --choco (§7.2), не заливка. */
.hh-draft-picker { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-faint); }
.hh-size-chip {
  /* Клітинка міні-таблиці розмірів (власник 04.10.2026): зверху розмір
     (дрібно, вторинний колір), під ним — скільки вільно (середня вага);
     рамки сусідніх клітинок злиті (margin -1px), тож рядок виглядає суцільною
     смужкою, а при переносі кожна клітинка лишається з повною рамкою. */
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;
  column-gap: 4px; row-gap: 1px; min-width: 48px; min-height: 44px; padding: 4px 8px; margin: 0 -1px -1px 0;
  border: 1px solid var(--line, var(--border)); border-radius: 0; background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer;
  font-variant-numeric: tabular-nums; position: relative;
}
.hh-size-chip__size { flex: 0 0 100%; text-align: center; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.hh-size-chip:hover { background: var(--surface-hover); z-index: 1; }
.hh-size-chip:focus-visible { z-index: 2; }
.hh-size-chip--in { background: color-mix(in srgb, var(--surface-brand) 8%, var(--surface)); border-color: var(--text); font-weight: 600; z-index: 1; }
.hh-size-chip--fit { border-style: dashed; border-color: var(--accent); z-index: 1; }
.hh-size-chip__free { color: var(--text); font-weight: 500; }
/* «F» — залишок FOTL у базового товару: тонований значок усередині чипа
   (зелений — вистачає, жовтий — мало; поріг рахує сервер), не заливка. */
.hh-size-chip__f {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; padding: 0 3px; border: 1px solid transparent; border-radius: 3px;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.hh-size-chip__f--ok  { color: var(--ok);   background: var(--ok-quiet);   border-color: var(--ok-border); }
.hh-size-chip__f--low { color: var(--warn); background: var(--warn-quiet); border-color: var(--warn-border); }
/* Спливайка складів над чипом: колонка «склад — скільки». */
.hh-size-pop {
  position: fixed; z-index: var(--z-suggest); min-width: 190px; max-width: calc(100vw - 16px);
  padding: var(--sp-2) var(--sp-3); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
  font-size: 12.5px; display: flex; flex-direction: column; gap: 4px;
}
.hh-size-pop[hidden] { display: none; }
.hh-size-pop__h { color: var(--text-muted); font-size: 11.5px; margin-bottom: 2px; }
.hh-size-pop__row { display: flex; justify-content: space-between; gap: var(--sp-4); font-variant-numeric: tabular-nums; }
.hh-size-pop__add { margin-top: var(--sp-2); align-self: stretch; min-height: 36px; }
.hh-draft-fit { font-size: 11.5px; margin: 2px 0 var(--sp-2) 0; }

/* Рядки списку пошуку клієнта/НП не стискаються й не налазять один на
   одного в контейнері з max-height (аудит 01.10.2026, B6 — той самий
   дефект, що виправлено в «Комунікаціях»). */
.hh-draft-results .hh-list__item { flex-shrink: 0; }

/* Права колонка чернетки (власник 01.10.2026): «Звідки», «Доставка»,
   підсумок — стосом. Липне лише підсумок з «Прийняти». */
.hh-draft-side { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.hh-draft-side .hh-draft-block { margin-bottom: var(--sp-3); }
.hh-draft-side .hh-section-head { margin-top: 0; }
.hh-draft-need { color: var(--text); font-weight: 500; }
.hh-draft-need--attention { color: var(--danger); }
/* Чипи біля клієнта у пошуку форми замовлення (718): сегменти й тип, дрібні,
   переносяться — на 375px не розпирають рядок результату. */
.hh-cust-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1, 4px); margin-top: var(--sp-1, 4px); }
.hh-cust-chips .hh-chip { padding-block: 0; }

/* Підбір товару: назва завжди окремим рядком і завжди видна; розміри —
   окремим рядком нижче, з переносом; нульові — пунктиром і згорнуті. */
.hh-draft-picker__bar { display: flex; gap: var(--sp-2); align-items: center; }
.hh-draft-picker__bar .hh-input { flex: 1 1 auto; min-width: 0; }
.hh-draft-picker__bar .hh-chip { flex: 0 0 auto; }
.hh-pick-results { margin-top: var(--sp-2); }
.hh-pick-coll { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-2); }
.hh-pick-coll__x { border: 0; background: none; padding: 0 2px; min-height: 0; font: inherit; line-height: 1; cursor: pointer; color: var(--text-muted); }
.hh-pick {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-faint);
}
.hh-pick__photo {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--radius);
  object-fit: cover; background: var(--surface-sunken);
}
.hh-pick__body { flex: 1 1 auto; min-width: 0; }
.hh-pick__name { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.hh-pick__meta { margin-top: 2px; }
.hh-pick__sizes { display: flex; flex-wrap: wrap; gap: 0; align-items: center; margin-top: 6px; padding: 0 1px 1px 0; }
.hh-pick__sizes .hh-pick__zero { margin-left: var(--sp-2); }
/* Рядок «FOTL» під розмірами (власник 10.10.2026): колонка = чип + клітинка
   зі штуками у FOTL; клітинка інформаційна (не кнопка), рамки злиті з чипом. */
.hh-pick__sizes--fotl { align-items: flex-start; }
.hh-pick__col { display: inline-flex; flex-direction: column; margin: 0 -1px -1px 0; }
.hh-pick__col .hh-size-chip { margin: 0 0 -1px 0; }
.hh-pick__col-top { min-height: 44px; }
/* Колонка-підпис «FOTL» перед розмірами: трохи відсунута від колонок чипів,
   щоб читалась як підпис рядка, а не ще один розмір. */
.hh-pick__col--label { margin-right: var(--sp-1); }
.hh-pick__fotl {
  display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 24px; padding: 2px 8px;
  border: 1px solid var(--line, var(--border)); background: var(--surface-sunken, var(--surface));
  color: var(--text); font-size: 12px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums;
  cursor: default; user-select: text;
}
.hh-pick__fotl--label { color: var(--text-muted); font-size: 11px; font-weight: 600; gap: 4px; padding: 2px 6px; }
.hh-pick__fotl--zero { color: var(--text-muted); }
.hh-pick__fotl--ok  { color: var(--ok);   background: var(--ok-quiet); }
.hh-pick__fotl--low { color: var(--warn); background: var(--warn-quiet); }
/* «без розміру» поруч із розмірами — неактивна клітинка (власник 10.10.2026). */
.hh-size-chip--off { opacity: .4; cursor: not-allowed; border-style: dashed; }
.hh-size-chip--off:hover { background: var(--surface); }
.hh-pick__fotl--stale { color: var(--text-faint, var(--text-muted)); background: var(--surface-sunken, var(--surface)); font-style: italic; }
.hh-pick__fotl-old { font-weight: 400; font-size: 10px; }
.hh-size-chip--zero { opacity: .55; }
.hh-size-chip--zero .hh-size-chip__free { color: var(--text-muted); }
.hh-pick__zero { font-size: 12px; }
.hh-pick-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; margin-top: var(--sp-2); }
.hh-pick-toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.hh-pick-more { margin-top: var(--sp-2); }
.hh-pick-catalog { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-faint); }
.hh-pick-catalog__filters { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-pick-catalog__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.hh-pick-catalog__filters .hh-select { width: auto; max-width: 100%; }
.hh-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.hh-pick-tile .hh-pick { height: 100%; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hh-pick-tile .hh-pick__photo { flex-basis: 64px; width: 64px; height: 64px; }

/* Підсумок чернетки праворуч і «Прийняти». На телефоні кнопка тут не
   потрібна — її несе прилипла нижня панель. */
.hh-draft-confirm { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.hh-draft-confirm .hh-btn { width: 100%; }
.hh-draft-bar { display: none; }
@media (max-width: 899px) {
  .hh-draft-summary .hh-draft-confirm .hh-btn { display: none; }
  .hh-draft-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    z-index: var(--z-sticky);
    margin: var(--sp-3) calc(-1 * var(--sp-4)) 0; padding: var(--sp-3) var(--sp-4);
    background: var(--surface-raised, var(--surface)); border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
  }
  .hh-draft-bar__sum { font-size: 12.5px; font-weight: 600; }
  /* Кнопка «?» (чат CORE) прилипає до правого нижнього кута — не
     перекриваємо нею «Прийняти». */
  .hh-draft-bar { padding-right: 76px; }
  /* Рядок чернетки на телефоні: степер кількості — власним рядом разом із
     «×», під ним Ціна · Знижка · Сума. Три грошові колонки поруч зі
     степером не вміщались і наїжджали одна на одну. */
  .hh-doc-lines--editable.hh-table--responsive tr { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .hh-doc-lines--editable.hh-table--responsive td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .hh-doc-lines--editable.hh-table--responsive td:nth-child(2) {
    grid-column: 1 / 4; grid-row: 2; flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--sp-2);
  }
  .hh-doc-lines--editable.hh-table--responsive td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .hh-doc-lines--editable.hh-table--responsive td:nth-child(4) { grid-column: 2; grid-row: 3; }
  .hh-doc-lines--editable.hh-table--responsive td:nth-child(5) { grid-column: 3; grid-row: 3; }
  .hh-doc-lines--editable.hh-table--responsive td.hh-doc-lines__act { grid-column: 4; grid-row: 2; display: flex; align-items: center; }
  .hh-draft-bar .hh-btn { min-height: 40px; }
  .hh-qty-stepper__btn { width: 32px; height: 32px; line-height: 30px; }
  .hh-draft-fit .hh-input--sm { font-size: 16px; }
  /* Телефон: розмір-чип — під палець. */
  .hh-size-chip { min-height: 44px; min-width: 48px; }
}

/* Меню «Нове замовлення ▾» у реєстрах продажів (власник 01.10.2026,
   screen-orders.js newDocMenuHtml): пункт — назва й дрібна підказка під
   нею, щоб «Роздріб» і «Корпоративне» розрізнялись не лише словом. На
   телефоні — під палець (44px) і на всю доступну ширину, не 200px. */
.hh-new-doc-menu .hh-menu__list { min-width: 290px; }
.hh-new-doc-menu__item { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.hh-new-doc-menu__label { color: var(--text); font-weight: 600; line-height: var(--lh-small); }
.hh-new-doc-menu__hint { color: var(--text-muted); font-size: var(--size-caption); line-height: var(--lh-caption); }
/* Короткий підпис кнопки «+ Нове ▾» — лише в шапці реєстру на телефоні
   (мобільний блок .hh-tdr-filters нижче); скрізь інде — повний. */
.hh-new-doc-menu__short { display: none; }
@media (max-width: 767px) {
  .hh-new-doc-menu__item { min-height: 44px; justify-content: center; }
  .hh-new-doc-menu .hh-menu__list { min-width: min(300px, calc(100vw - 32px)); }
}

/* «Гроші → Звіт доходу» (screen-money-reports.js): кожна цифра — кнопка
   розшифровки (HH_DRILL), на вигляд — звичайне число таблиці. */
.hh-ir-table .hh-ir-cell {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: right; font-variant-numeric: tabular-nums;
}
.hh-ir-table .hh-ir-cell:hover, .hh-ir-table .hh-ir-cell:focus-visible { text-decoration: underline; }
.hh-ir-le .hh-select { text-align: left; }
.hh-ir-le__pop { box-shadow: var(--shadow-overlay); }
/* Ліва колонка — вузька, підпис переноситься (власник, 03.10.2026: «колонка
   надто широка, підписи розжовані»). Ширина на клітинці при автоматичній
   розкладці задає колонку (не вужчу за найдовше слово); вивільнене місце
   дістається колонкам ліній. Цифри (.hh-td--num) лишаються в один рядок. */
.hh-ir-table .hh-ir-label { width: 13em; min-width: 8em; white-space: normal; line-height: 1.3; }
.hh-ir-intro { margin: 0 0 var(--sp-3); }
@media (max-width: 767px) {
  /* Картка рядка: підпис — заголовок картки зліва, далі «лінія — сума». */
  .hh-ir-table td.hh-ir-label,
  .hh-ir-table td.hh-ir-section { width: auto; justify-content: flex-start; text-align: left; }
  .hh-ir-table td.hh-ir-label { font-weight: var(--weight-medium); }
  /* Порожній ::before-підпис картки штовхав підпис рядка праворуч. */
  .hh-ir-table td.hh-ir-label::before,
  .hh-ir-table td.hh-ir-section::before { content: none; }
  /* Довга назва лінії («Hygge Hoodie X Label») переноситься, а сума
     лишається цілою в межах картки, не виїжджає за край екрана. */
  .hh-ir-table td.hh-td--num::before { flex: 1 1 auto; min-width: 0; white-space: normal; }
}

/* Кнопка «?» (CORE AI) — ніколи на папері, з будь-якого екрана (власник
   03.10.2026: «забери з друку акту цей знак питання»). */
@media print { .hh-ask-core-fab { display: none !important; } }

/* Зовнішні джерела замовлення в правій колонці (design/order-source-panels.js,
   власник 05.10.2026): сайт партнера й FOTL — коротка картка (чипи станів +
   kv-рядки, як «Звідки замовлення»), деталі — поп-апом. Значення рядка не
   обрізаються «…»: доставка й ТТН мають читатись цілком і на 375px. */
.hh-src-head { align-items: baseline; }
.hh-src-more { background: none; border: 0; padding: 4px 0; min-height: 32px; cursor: pointer; flex: none; }
.hh-src-card { margin-bottom: var(--sp-4); }
.hh-src-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-2); }
.hh-src-card .hh-kv-row__v { white-space: normal; overflow-wrap: anywhere; overflow: visible; }
.hh-src-modal { max-width: 560px; }
.hh-src-modal__body .hh-kv, .hh-src-modal__body .hh-kv-row { padding: 4px 0; }
.hh-src-modal__body .hh-kv__v, .hh-src-modal__body .hh-kv-row__v { min-width: 0; overflow-wrap: anywhere; white-space: normal; }

/* «Продаж → Онлайн → Зміни» (design/online-shifts-tab.js, власник
   05.10.2026, доробка після #3565). День — заголовок секції, зміна —
   компактний рядок (менеджер · час · оборот · к-сть), розкриття — табличка
   каналів (канал | з часу попередньої | за час зміни | разом). На телефоні
   рядок табличики стає стосом: назва каналу на всю ширину, три суми — у
   дві колонки з підписами; горизонтальної прокрутки на 375px немає. */
.hh-oshifts__filters { display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-oshifts__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hh-oshifts__day + .hh-oshifts__day { border-top: var(--border-w) solid var(--border); }
.hh-oshifts__day-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3);
  padding: 8px 14px; background: var(--surface-hover);
  border-bottom: var(--border-w) solid var(--border-faint);
}
.hh-oshifts__day-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.hh-oshifts__empty { padding: 9px 14px; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.hh-oshifts__shift { border-bottom: var(--border-w) solid var(--border-faint); }
.hh-oshifts__shift:last-child { border-bottom: 0; }
.hh-oshifts__main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-3);
  min-height: 36px; padding: 4px 14px 4px 8px; cursor: pointer;
}
.hh-oshifts__main:hover { background: var(--surface-hover); }
.hh-oshifts__main .hh-row-toggle { margin: -6px -4px; flex: 0 0 auto; }
.hh-oshifts__name { font-size: 12.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hh-oshifts__time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.hh-oshifts__sum { margin-left: auto; display: inline-flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; }
.hh-oshifts__total { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hh-oshifts__cnt-main { font-size: 11px; color: var(--text-muted); }
.hh-oshifts__detail { background: var(--surface-hover); padding: 4px 14px 10px 44px; }
.hh-oshifts__tr {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 4px var(--sp-3); align-items: start;
  padding: 8px 0; border-top: var(--border-w) solid var(--border-faint);
}
.hh-oshifts__tr--head { border-top: 0; padding: 4px 0; }
.hh-oshifts__tr--foot { border-top: var(--border-w) solid var(--border); }
.hh-oshifts__th { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.hh-oshifts__th--num { text-align: right; }
.hh-oshifts__td { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; text-align: right; }
.hh-oshifts__td--name { align-items: flex-start; text-align: left; }
.hh-oshifts__td-label { display: none; font-size: 10.5px; color: var(--text-muted); }
.hh-oshifts__amt { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hh-oshifts__td--total .hh-oshifts__amt { font-weight: 700; }
.hh-oshifts__cnt { font-size: 12px; color: var(--text-muted); }
.hh-oshifts__ch-name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.hh-oshifts__ch-prev { font-size: 11.5px; color: var(--text-muted); }
.hh-oshifts__ch-link { font-size: 12px; }
@media (max-width: 640px) {
  .hh-oshifts__detail { padding: 4px 14px 10px; }
  .hh-oshifts__tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hh-oshifts__tr--head { display: none; }
  .hh-oshifts__td--name { grid-column: 1 / -1; }
  .hh-oshifts__td { align-items: flex-start; text-align: left; }
  .hh-oshifts__td-label { display: block; }
  .hh-oshifts__cnt::before { content: "к-сть "; }
}

/* «Гроші → Незаметчені» (screen-money-uncategorized.js, власник 05.10.2026):
   група місяця з підсумком над таблицею, підказка з підставою в клітинці,
   панель фільтра рахунку. */
.hh-mu-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hh-mu-filter { margin: 0; min-width: 220px; max-width: 360px; flex: 1 1 220px; }
.hh-mu-month { margin-bottom: var(--sp-5); }
.hh-mu-month__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2); }
.hh-mu-month__title { font-weight: 600; font-size: 15px; margin: 0; }
.hh-mu-month__sum { margin: 0; font-size: 13px; }
.hh-mu-hint { display: flex; flex-direction: column; gap: 2px; }
.hh-mu-hint__cat { font-weight: 500; }
.hh-mu-hint__why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Не .hh-docs-status-group: на телефоні той клас перебудовує рядок у сітку
   реєстру продажів (статуси/канал), і клітинки черги ставали стовпчиками по
   46px. Тут — звичайна картка .hh-table--responsive. На десктопі — однакові
   ширини колонок у всіх місячних таблицях, щоб групи читалися одним списком. */
@media (min-width: 768px) {
  .hh-mu-table { table-layout: fixed; }
  .hh-mu-table td { vertical-align: top; }
  .hh-mu-table td:first-child { white-space: nowrap; }
  .hh-mu-table th:nth-child(1) { width: 11%; }
  .hh-mu-table th:nth-child(2) { width: 18%; }
  .hh-mu-table th:nth-child(3) { width: 16%; }
  .hh-mu-table th:nth-child(4) { width: 12%; }
  .hh-mu-table th:nth-child(5) { width: 21%; }
  .hh-mu-table th:nth-child(6) { width: 22%; }
}
@media (max-width: 767px) {
  .hh-mu-table td[data-label="Підказка"]:empty { display: none; }
  .hh-mu-table .hh-mu-hint { align-items: flex-end; }
}

/* «Каси» туру — матриця «каси × концерти» (design/tour-register-matrix.js,
   745, власник 05.10.2026). Таблиця — рецепт .hh-team-matrix-* вище
   (приклеєна колонка, горизонтальний скрол); тут лише стан клітинки й
   перемикання таблиця ↔ список концертів із чипами на телефоні.
   Кольори — ті самі трійки --danger-* / --warn-*, що банери, не нові. */
.hh-regmx td.hh-regmx-cell { text-align: center; }
.hh-regmx th.is-past, .hh-regmx td.is-past { background: var(--surface-hover); color: var(--text-muted, inherit); }
.hh-regmx td.is-busy { background: var(--danger-quiet); box-shadow: inset 0 0 0 1px var(--danger-border); }
.hh-regmx td.is-overlap { background: var(--warn-quiet); box-shadow: inset 0 0 0 1px var(--warn-border); }
/* 795: каса з інвентарю туру (термінал відправлено реквізитом) — та сама
   трійка --info-*, що чип «з інвентарю туру» на картці події. */
.hh-regmx td.is-equipment { background: var(--info-quiet); box-shadow: inset 0 0 0 1px var(--info-border); }
.hh-regmx-rowacts { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.hh-regmx-bulk { border: var(--border-w) solid var(--border); border-radius: var(--radius-md, 8px);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.hh-regmx-bulk__row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-top: 6px; }
.hh-regmx-legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; }
.hh-regmx-legend.is-busy { background: var(--danger-quiet); border: 1px solid var(--danger-border); }
.hh-regmx-legend.is-overlap { background: var(--warn-quiet); border: 1px solid var(--warn-border); }
.hh-regmx-legend.is-equipment { background: var(--info-quiet); border: 1px solid var(--info-border); }
.hh-regmx-list { display: none; }
.hh-regmx-list__item { padding: var(--sp-2) 0; border-top: var(--border-w) solid var(--border); }
.hh-regmx-list__item.is-past { opacity: .7; }
.hh-regmx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hh-regmx-chip { min-height: 36px; padding: 4px 12px; border-radius: 999px; font: inherit; font-size: var(--size-small);
  border: var(--border-w) solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.hh-regmx-chip.is-on { background: var(--accent-quiet, var(--surface-hover)); border-color: var(--accent, var(--border-strong)); font-weight: 600; }
.hh-regmx-chip.is-busy { background: var(--danger-quiet); border-color: var(--danger-border); }
.hh-regmx-chip.is-overlap { background: var(--warn-quiet); border-color: var(--warn-border); }
.hh-regmx-chip.is-equipment { background: var(--info-quiet); border-color: var(--info-border); }
.hh-regmx-chip:disabled { cursor: default; opacity: .6; }
@media (max-width: 767px) {
  .hh-regmx-table { display: none; }
  .hh-regmx-list { display: block; }
}

/* ── Точка «наживо» ──────────────────────────────────────────────────────
   ОДИН компонент на всі місця, де продаж іде просто зараз (власник,
   05.10.2026): рядок продажу «Найближчих подій» на Головній CORE і «Іде
   зараз» на X · Головна. До цього точка була інлайн-стилем у screen-home.js
   (8px, без руху), а на X · Головна її не було зовсім — лише чіп «наживо».
   10px — «трохи більші» за власником; пульс — кільце, що розходиться від
   точки, сама точка не змінює розміру (рядок не «дихає»). Без руху для
   prefers-reduced-motion: точка лишається, сенс не губиться. */
.hh-live-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  vertical-align: middle;
}
.hh-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--danger);
  animation: hh-live-pulse 1.6s ease-out infinite;
}
@keyframes hh-live-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  80%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-live-dot::after { animation: none; opacity: 0; }
}

/* ── Чіп «наживо» ────────────────────────────────────────────────────────
   Власник, 05.10.2026 (друга редакція): «наживо» — ЧІП у червоних тонах із
   пульсуючою точкою .hh-live-dot усередині, перед словом; окремої точки
   перед «Продаж: …» більше немає. Один компонент для Головної CORE
   («Найближчі події» X) і «Іде зараз» на X · Головна; розмітку дає
   HH_SALES.liveChipHtml() (sales-shared.js), тож двох копій немає.
   Тони — та сама трійка, що .hh-chip--danger (--danger / --danger-quiet /
   --danger-border): обидві теми їх уже мають, у темній — світліший червоний
   на темно-червоному тлі. Притиснутий до правого краю робить викликач
   (margin-left:auto у рядку заголовка / верх хвоста). */
.hh-chip--live {
  color: var(--danger);
  background: var(--danger-quiet);
  border-color: var(--danger-border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
}

/* Пошук над списком «Комунікацій» (власник 05.10.2026): влучення в імені й
   уривку — той самий прийом, що .hh-hit mark глобального пошуку (shell.css):
   колір акценту без жовтої плашки браузера. */
.hh-comm-hit { background: transparent; color: var(--accent); font-weight: var(--weight-medium); }
/* На телефоні поле пошуку — повний тач-таргет (§13 CLAUDE.md), не компакт. */
@media (max-width: 1039.98px) {
  .hh-comm-search .hh-input { min-height: 44px; font-size: var(--size-body); }
}
/* --------------------------------------------------------------------------
   РОЗГОРТУВАНІ РЯДКИ ДОКУМЕНТІВ ПРОДАЖУ (design/sale-doc-rows.js, власник
   05.10.2026) — картка клієнта й панель чату. Рядок — <button>
   .hh-list__item (увесь рядок розгортає, шеврон §7.6 декоративний),
   розкриття — тонований блок під рядком: чипи стану, позиції одним рядком
   кожна (назва · кількість × ціна · сума), ланцюжок пов'язаних документів
   і «Відкрити». Висота рядка та сама, що в .hh-list__item.
   -------------------------------------------------------------------------- */
.hh-sdoc__row {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-2) var(--sp-4);
  gap: var(--sp-2);
  border: 0;
  border-bottom: var(--border-w) solid var(--border-faint);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hh-sdoc__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hh-sdoc--open > .hh-sdoc__row { background: var(--surface-hover); }
.hh-sdoc__trail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hh-sdoc__detail {
  padding: var(--sp-2) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 22px + var(--sdoc-indent, 0px));
  background: color-mix(in srgb, var(--surface-brand) 5%, var(--surface));
  border-bottom: var(--border-w) solid var(--border-faint);
}
.hh-sdoc__detail .hh-status-chips { margin: 0 0 var(--sp-2); gap: 6px; }
.hh-sdoc__lines { display: flex; flex-direction: column; }
.hh-sdoc__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: 5px 0;
  font-size: var(--size-small);
  line-height: var(--lh-small);
  border-top: var(--border-w) solid var(--border-faint);
  font-variant-numeric: tabular-nums;
}
.hh-sdoc__line:first-child { border-top: 0; }
.hh-sdoc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-sdoc__qty { color: var(--text-muted); white-space: nowrap; }
.hh-sdoc__sum { text-align: right; white-space: nowrap; font-weight: var(--weight-medium); }
.hh-sdoc__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-2); }
.hh-sdoc__label { font-size: var(--size-caption); color: var(--text-muted); margin-right: 2px; }
a.hh-sdoc__link { text-decoration: none; color: var(--text); }
a.hh-sdoc__link:hover { border-color: var(--accent); color: var(--accent); }
.hh-sdoc__actions { display: flex; justify-content: flex-end; margin-top: var(--sp-2); }
.hh-sdoc__empty { margin: 0; padding: var(--sp-1) 0; font-size: var(--size-small); color: var(--text-muted); }
@media (max-width: 767px) {
  /* Рядок документа не переносить суму й статус під назву (загальне
     правило .hh-list__item на телефоні): сума й чип — короткий стовпчик
     праворуч, як у .hh-list--compact. */
  .hh-sdoc__row { flex-wrap: nowrap; align-items: center; }
  .hh-sdoc__row .hh-list__trail { width: auto; padding-left: 0; margin-top: 0; text-align: right; white-space: nowrap; flex: none; }
  .hh-sdoc__detail { padding-left: calc(var(--sp-4) + var(--sdoc-indent, 0px)); }
  /* Кількість × ціна переходить під назву — сума лишається праворуч. */
  .hh-sdoc__line { grid-template-columns: minmax(0, 1fr) auto; }
  .hh-sdoc__qty { grid-column: 1; grid-row: 2; font-size: var(--size-caption); }
  .hh-sdoc__sum { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}

/* --------------------------------------------------------------------------
   ПРАВА ПАНЕЛЬ ЧАТУ — ОДИН КОМПАКТНИЙ ДИЗАЙН-КОД (власник 06.10.2026)
   Кожен блок (.hh-comm-pblock) — заголовок .hh-overline над щільною
   карткою .hh-card--dense, той самий каркас, що «Комунікація» на картці
   клієнта (customer-conversations.js). Однакові відступи між блоками,
   однаковий розмір рядків (--size-small) і чипів (.hh-chip--sm).
   -------------------------------------------------------------------------- */
.hh-comm-pblock { margin-bottom: var(--sp-3); }
.hh-comm-pblock__title { margin: 0 0 var(--sp-1); }
.hh-comm-pblock__card { padding: var(--sp-2) var(--sp-3); }
.hh-comm-pblock--conv .hh-overline { margin-bottom: var(--sp-1) !important; }
.hh-comm-pblock--conv .hh-card { margin-bottom: 0 !important; }
.hh-comm-pblock__more { display: inline-block; margin-top: var(--sp-2); }
.hh-comm-context .hh-comm-match-banner { margin: 0; padding: 0; border: 0; background: transparent; }

.hh-comm-client { display: flex; gap: var(--sp-2); align-items: flex-start; }
.hh-comm-client__avatar { flex: none; }
.hh-comm-client__body { min-width: 0; }
.hh-comm-client__name { margin: 0; font-size: var(--size-body); font-weight: var(--weight-medium); line-height: var(--lh-small); }
.hh-comm-client__chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.hh-comm-client__meta { margin: 0; }
.hh-comm-client__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.hh-comm-client__confirm { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: var(--border-w) solid var(--border-faint); }

.hh-comm-lines { display: flex; flex-direction: column; }
.hh-comm-line {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: 4px 0; font-size: var(--size-small); line-height: var(--lh-small);
  border-top: var(--border-w) solid var(--border-faint);
}
.hh-comm-line:first-child { border-top: 0; }
.hh-comm-line__name { min-width: 0; overflow-wrap: anywhere; }
.hh-comm-line__qty { display: flex; align-items: center; gap: 2px; flex: none; }
.hh-comm-line__sum { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh-comm-line--total { font-weight: var(--weight-medium); border-top: var(--border-w) solid var(--border); }

.hh-comm-sel-tools { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.hh-comm-sel-tools .hh-input { width: 100%; }
.hh-comm-sel-actions { display: flex; gap: var(--sp-2); }
.hh-comm-sel-actions .hh-btn { flex: 1 1 0; min-width: 0; white-space: normal; }

/* Розгортувані рядки продажів у вузькій колонці — без бічних полів картки. */
.hh-comm-sales.hh-sdoc-list { margin: 0 calc(-1 * var(--sp-3)); }
.hh-comm-sales .hh-sdoc__row { padding: var(--sp-2) var(--sp-3); min-height: 0; }
.hh-comm-sales .hh-sdoc__detail { padding-left: var(--sp-3); padding-right: var(--sp-3); }

/* Банер зіставлення над стрічкою — лише там, де права панель схована. */
@media (min-width: 1040px) {
  .hh-comm-mobile-only { display: none; }
}

/* «Прив'язати до клієнта» (власник 07.10.2026) — пошук у блоці «Клієнт»
   правої панелі й над стрічкою на телефоні. Компактно: рядок — ім'я зі
   значками каналів, під ним телефон частково · покупки · @нік. */
.hh-comm-link__open { margin-top: var(--sp-2); }
.hh-comm-link { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.hh-comm-link__search { display: flex; gap: var(--sp-1); align-items: center; }
.hh-comm-link__search .hh-input { flex: 1; min-width: 0; }
.hh-comm-link__group { margin: var(--sp-1) 0 0; }
.hh-comm-link__list { display: flex; flex-direction: column; border: var(--border-w) solid var(--border-faint); border-radius: var(--radius); overflow: hidden; }
.hh-comm-link__row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: var(--sp-1) var(--sp-2); min-height: 44px; border: 0; border-top: var(--border-w) solid var(--border-faint);
  background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.hh-comm-link__row:first-child { border-top: 0; }
.hh-comm-link__row:hover, .hh-comm-link__row:focus-visible { background: var(--surface-hover, var(--info-quiet)); }
.hh-comm-link__row[disabled] { opacity: .6; cursor: progress; }
.hh-comm-link__main { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.hh-comm-link__name { font-size: var(--size-small); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hh-comm-link__chs { display: inline-flex; gap: 3px; flex: none; }
/* «Фізособа» / «ФОП / Юрособа» (828) — тип клієнта поруч з іменем, не стискається. */
.hh-comm-link__kind { flex: none; }
.hh-comm-link__ch { display: inline-flex; width: 14px; height: 14px; font-size: 11px; line-height: 1; align-items: center; justify-content: center; }
.hh-comm-link__ch svg { width: 14px; height: 14px; display: block; }
.hh-comm-link__meta { font-variant-numeric: tabular-nums; }
.hh-comm-link__why { margin-top: 2px; }
.hh-comm-link__create { align-self: flex-start; margin-top: var(--sp-1); }
[data-link-mobile] { margin-bottom: var(--sp-2); }
[data-link-mobile] .hh-comm-link__open { margin-top: 0; }
.hh-comm-row-more { white-space: nowrap; }

/* Чип стану ТТН у «Відвантаженні» (07.10.2026, власник): один рядок за
   шириною вмісту, 11px, «…» лише коли не влазить. Специфічніший за правила
   клітинки «Доставка» вище (перенос на широкому екрані, 104px у вузькому
   контейнері) — свідомо: хвіст ТТН усередині чипа не має рватися на два
   рядки. Межа 210px — найдовший підпис «ТТН створена — не відправлена ·
   9345» при 11px. */
.hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-delivery .hh-chip.hh-docs-ttn-chip,
.hh-docs-cell--status-delivery .hh-chip.hh-docs-ttn-chip {
  display: inline-block; width: auto; max-width: 210px;
  font-size: 11px; line-height: 16px; padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}

/* РЕЄСТР НА ЗВУЖЕНОМУ ЕКРАНІ (власник, 10.10.2026, «Онлайн → Замовлення»
   на ~1000px: «ховаються колонки (сума) і відсутня прокрутка»). Обгортка
   вже мала overflow-x: auto, але на macOS смуга прокрутки — накладна й
   невидима, доки не почнеш крутити, тож «Сума» за правим краєм виглядала
   просто обрізаною. Тому:
     • смуга прокрутки обгортки — завжди видима, тонка (власний
       ::-webkit-scrollbar вимикає накладний режим у Chrome/Safari;
       Firefox — scrollbar-width/color);
     • «Дата · час» — колонка під сам час: заголовок двома рядками, менші
       бокові відступи між часом і кнопкою розкриття в «Документі»;
     • телефон клієнта — разом, без пробілів (phoneDisplay);
     • «Документ» — номер під типом;
     • чип ТТН без хвоста номера (trade-documents-registry.js, ttnLineHtml),
       у компактному контейнері — двома рядками.
   Телефон (< 768px) — власна картка-сітка, ці правила її не зачіпають.
   Сторож — tests/design-trade-documents-registry-compact-1000.test.js. */
.hh-docs-table-wrap::-webkit-scrollbar { height: 8px; }
.hh-docs-table-wrap::-webkit-scrollbar-track { background: transparent; }
.hh-docs-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.hh-docs-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
@supports not selector(::-webkit-scrollbar) {
  .hh-docs-table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
}
@media (min-width: 768px) {
  .hh-docs-status-group.hh-tdr-table thead th:first-child,
  .hh-docs-status-group.hh-tdr-table td.hh-docs-cell--time { padding-right: var(--sp-1); }
  .hh-docs-status-group.hh-tdr-table td.hh-docs-cell--time { white-space: nowrap; }
  .hh-docs-status-group.hh-tdr-table thead th:first-child { width: 1%; white-space: normal; line-height: 1.25; }
  .hh-docs-status-group.hh-tdr-table td.hh-docs-cell--doc { padding-left: var(--sp-1); }
  /* «Замовлення» / «CO-2026-000075» — двома рядками й на широкому екрані
     (як уже в компактному контейнері): один рядок ~250px забирав місце в
     «Каналу» й «Суми», а номер, що не влазив, різався «…». */
  .hh-tdr-table .hh-docs-cell--doc .hh-doc-type > span:last-child { white-space: normal; line-height: 1.3; }
  .hh-tdr-table .hh-docs-cell--doc .hh-doc-type span.hh-docs-docnum:last-child { display: block; white-space: nowrap; }
  /* Компактний контейнер (≤ 1000px, правило «РЕЄСТР У ВУЗЬКІЙ ПАНЕЛІ»
     вище): довгий стан ТТН («ТТН створена — не відправлена») — двома
     рядками в межах 136px, а не «…» (повний статус і номер — у підказці). */
  @container hh-tdr (max-width: 1000px) {
    .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-delivery .hh-chip.hh-docs-ttn-chip {
      max-width: 136px; white-space: normal; overflow-wrap: break-word; border-radius: var(--radius-sm);
    }
  }
}

/* ==========================================================================
   КАТАЛОГ: КОМПАКТНА ШАПКА НА ТЕЛЕФОНІ (власник, 06.10.2026)
   design/screen-products.js — вкладки «Усі товари»/«Товари/послуги»/
   «Розміри» і шапка картки товару; screen-collections.js renderGoodsSection.
   «Тут теж верхня частина можна оптимізувати, в один рядок більше дати,
   зменшити»: на телефоні шапка «Усі товари» займала весь перший екран.
   Окремий блок, лише @media (max-width: 767px) — десктоп не змінюється,
   крім базових правил нижче, що для десктопа відтворюють колишній вигляд.
   ========================================================================== */
/* Десктоп/база: «+» і короткі підписи — лише для телефона. */
.hh-prod-new__plus,
.hh-prod-note__short,
.hh-prod-bulk__short { display: none; }
/* Кнопки керування товаром у рядку чіпів картки — притиснуті праворуч. */
.hh-pc-head__main { flex: 1 1 auto; min-width: 0; }
.hh-pc-head__chips > .hh-pc-actions { margin-left: auto; }

@media (max-width: 767px) {
  /* Заголовок вкладки — розмір мобільного h2, не display. */
  .hh-prod-head .hh-section-title,
  .hh-pc-head .hh-section-title {
    font-size: var(--size-h2);
    line-height: var(--lh-h2);
  }

  /* «Усі товари»: рядок 1 — назва (+ стрілка «‹» додатку) і лічильник
     дрібним підписом; рядок 2 — пошук + Вітрина/Список + «+». */
  .hh-prod-head:not(.hh-prod-head--tab) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--sp-2);
    row-gap: 2px;
    margin-bottom: var(--sp-2);
  }
  .hh-prod-head:not(.hh-prod-head--tab) > .hh-section-head,
  .hh-prod-head:not(.hh-prod-head--tab) > .hh-section-head > .hh-row { display: contents; }
  .hh-prod-head > .hh-section-head > .hh-section-title,
  .hh-prod-head > .hh-section-head > .hh-app-titlerow { grid-column: 1 / -1; grid-row: 1; }
  .hh-prod-head .hh-app-titlerow + * { margin-top: 0; }
  .hh-prod-head .hh-prod-head__count {
    grid-column: 1 / -1; grid-row: 2;
    font-size: var(--size-caption); line-height: var(--lh-caption);
    margin-bottom: var(--sp-1);
  }
  .hh-prod-head .hh-prod-search {
    grid-column: 1; grid-row: 3;
    min-width: 0;
    min-height: 36px; height: 36px;
    font-size: 14px;
    margin-bottom: 0 !important;
  }
  .hh-prod-head .hh-prod-search::placeholder { font-style: normal; }
  .hh-prod-head .hh-prod-view { grid-column: 2; grid-row: 3; }
  .hh-prod-head .hh-prod-new  { grid-column: 3; grid-row: 3; }

  /* Вітрина/Список — малий сегмент. */
  .hh-prod-view { padding: 2px; flex: none; }
  .hh-prod-view .hh-segmented__item {
    min-height: 30px; padding: 0 var(--sp-2);
    font-size: var(--size-caption);
  }
  /* «Новий товар» → квадратна «+», назва — в aria-label/title. */
  .hh-prod-new {
    min-height: 36px; width: 36px; padding: 0;
    justify-content: center; font-size: 20px; line-height: 1;
  }
  .hh-prod-new__plus { display: inline; font-size: 22px; line-height: 1; font-weight: 400; }
  .hh-prod-new__label { display: none; }

  /* Вкладки без пошуку («Товари/послуги», «Розміри»): назва ліворуч,
     перемикач праворуч в одному рядку. */
  .hh-prod-head--tab { flex-wrap: nowrap; align-items: center; margin-bottom: var(--sp-2); }
  .hh-prod-head--tab > .hh-section-title,
  .hh-prod-head--tab > .hh-app-titlerow { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .hh-prod-head--tab .hh-section-title { overflow: hidden; text-overflow: ellipsis; }

  /* Ряди чіпів фільтрів: кожна група — один рядок із горизонтальною
     прокруткою, без переносу й без виходу за край сторінки. Inline-стиль
     у розмітці (flex-wrap:wrap) перебивається лише !important. */
  .hh-prod-chips,
  .hh-pc-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    gap: 6px !important;
    margin-bottom: 6px !important;
    padding-bottom: 1px;
  }
  .hh-pc-nav { margin: var(--sp-2) 0 !important; }
  .hh-prod-chips::-webkit-scrollbar,
  .hh-pc-nav::-webkit-scrollbar { display: none; }
  .hh-prod-chips > .hh-chip,
  .hh-pc-nav > .hh-chip {
    flex: none;
    white-space: nowrap;
    min-height: 26px;
    padding: 1px var(--sp-2);
    font-size: 11px;
    line-height: 1.3;
  }

  /* Підпис «рахунок по довантаженому» — коротка версія, повна в title. */
  .hh-prod-note { margin-bottom: var(--sp-2) !important; }
  .hh-prod-note__full { display: none; }
  .hh-prod-note__short { display: inline; cursor: help; }

  /* Групова заміна статусу/колекції — один рядок, короткі підписи. */
  .hh-prod-bulk { flex-wrap: nowrap !important; gap: 6px !important; }
  .hh-prod-bulk > .hh-btn {
    min-height: 32px; padding: 0 var(--sp-2);
    font-size: var(--size-caption);
    min-width: 0; white-space: nowrap;
  }
  .hh-prod-bulk__full { display: none; }
  .hh-prod-bulk__short { display: inline; }

  /* Рядки списку (каталог і «Товари/послуги») — щільніші. */
  [data-product-list] .hh-list__item,
  .hh-prod-list > .hh-list__item {
    min-height: 0;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  [data-product-list] .hh-list__title,
  .hh-prod-list .hh-list__title { font-size: var(--size-small); line-height: var(--lh-small); }

  /* Картка товару: «Джерело» — дрібно й щільно; кнопки керування —
     32px, малі проміжки. На 375px рядок чіпів (колір/статус/стать/ціна)
     сам займає майже всю ширину, і три кнопки переносились окремим
     рядком — тож на телефоні вони стають у рядок НАЗВИ, праворуч
     (назва відступає під них), окремого рядка немає. */
  .hh-pc-head { margin-bottom: var(--sp-1); }
  .hh-pc-head__main { position: relative; }
  .hh-pc-head:has(.hh-pc-actions) .hh-section-title { padding-right: 104px; }
  .hh-pc-head__chips > .hh-pc-actions { position: absolute; top: -4px; right: 0; margin: 0; }
  .hh-pc-head__source { margin-top: 2px !important; line-height: 1.2; }
  .hh-pc-actions { gap: 2px; }
  .hh-pc-actions > .hh-icon-btn { width: 32px; height: 32px; }
  .hh-pc-actions > .hh-icon-btn svg { width: 16px; height: 16px; }
}
/* ===== /КАТАЛОГ: КОМПАКТНА ШАПКА НА ТЕЛЕФОНІ ============================ */

/* ==========================================================================
   «УСІ ПРОДАЖІ» НА ТЕЛЕФОНІ — КОМПАКТНА ШАПКА І ЧИПИ ОДНИМ РЯДОМ
   (власник, 06.10.2026, скріни реєстру на телефоні: «Можеш вирівняти чіпи
   в один ряд?» і «щоб все компактно було, менші кнопки та поля пошуку»).
   Лише <768px і лише реєстр торгових документів (.hh-tdr-*); десктопна
   таблиця й інші .hh-docs-status-group (закупівлі, банк) не змінюються.
   Блок стоїть у кінці файлу свідомо: він перекриває мобільну грид-картку
   (вище, «три статуси трьома третинами») і правило чипа ТТН над ним.

   Рядок-картка — flex-wrap замість грида:
     1) ▸ Чек / Видаткова …………… час
     2) клієнт (+ телефон) …………… сума
     3) чипи ОДНИМ рядом, з переносом: статус → оплата (Оплачено,
        Фіскалізовано) → доставка (Відвантажено / Є видаткова, 1С, ТТН);
        підпис способу оплати («Monobank 890 ₴») — дрібно, ПІСЛЯ чипів.
   Раніше три клітинки статусів були трьома колонками грида, і чипи стояли
   на різній висоті (оплата стовпчиком під клієнтом, доставка праворуч,
   ТТН вилазив за край). Тепер клітинки статусів і їхні обгортки
   (.hh-docs-paystack, .hh-docs-dlv__line) — display: contents, чипи стають
   прямими flex-елементами рядка, а порядок задає `order`. Переноси між
   рядками 1/2/3 — псевдоелементи ::before/::after на всю ширину.
   Порожнє «—» на телефоні не показуємо: воно нічого не каже, а лише
   займало місце в ряду (розкриття рядка, як і раніше, показує все).
   ========================================================================== */
@media (max-width: 767px) {
  /* --- Картка реєстру: від краю екрана до вмісту рівно 16px ------------ */
  .hh-card.hh-tdr-card {
    margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4));
    border-left: 0; border-right: 0; border-radius: 0;
  }
  /* Таблиця всередині картки — без другої рамки («картка в картці»). */
  .hh-card .hh-tdr-wrap { border: 0; border-radius: 0; }

  /* --- Шапка: тип документа, пошук, «Фільтри», «Нове замовлення» ------- */
  .hh-tdr-scope.hh-tdr-filters {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-2);
  }
  .hh-tdr-filters > * { margin: 0 !important; }
  /* Обгортки рядків несуть інлайновий padding 0 var(--sp-3) — тут поля
     дає сам контейнер шапки. */
  .hh-tdr-filters > div { padding-left: 0 !important; padding-right: 0 !important; }
  /* Рядок сегментів і кнопки — «прозорий»: сегменти займають увесь
     перший ряд, кнопка стає поруч із пошуком і «Фільтрами». */
  .hh-tdr-filters > .hh-tdr-chips-row { display: contents !important; }
  .hh-tdr-filters .hh-tdr-chips-row > .hh-segmented { order: 0; flex: 1 1 100%; }
  .hh-tdr-filters > .hh-tdr-search { order: 1; flex: 1 1 0; min-width: 0; }
  .hh-tdr-filters > .hh-docs-filters-trigger { order: 2; flex: none; }
  .hh-tdr-filters .hh-tdr-chips-row__action { order: 3; flex: none; margin: 0 !important; }
  .hh-tdr-filters > :not(.hh-tdr-chips-row):not(.hh-tdr-search):not(.hh-docs-filters-trigger) { order: 4; flex: 1 1 100%; }

  /* Сегменти — один ряд, що прокручується вбік у власних межах (сторінка
     не їде), дрібніші: 28px заввишки, 12px. */
  .hh-tdr-filters .hh-segmented {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 2px; max-width: 100%;
  }
  .hh-tdr-filters .hh-segmented::-webkit-scrollbar { display: none; }
  .hh-tdr-filters .hh-segmented__item {
    flex: 1 0 auto; min-height: 28px; padding: 0 var(--sp-2);
    font-size: var(--size-caption); white-space: nowrap;
  }

  /* Пошук — звичайна висота 36px. Шрифт значення лишається 16px (менше —
     iOS зумить сторінку на фокусі, правило .hh-input), а підказка —
     дрібніша й без курсиву.
     Поле й кнопки ділять один ряд на 390px (власник 12.10.2026: підказка
     обрізалась до «Номе»): бокові поля поля 8px, кнопок 10px, підказка 13px —
     «Номер, ім'я або телефон» уміщається цілою; якщо ні (лічильник
     «Фільтри · N», більший шрифт системи) — три крапки, не обрубок. */
  .hh-tdr-filters .hh-tdr-search .hh-input {
    min-height: 36px; padding: 0 var(--sp-2);
    text-overflow: ellipsis;
  }
  .hh-tdr-filters .hh-tdr-search .hh-input::placeholder { font-size: 13px; font-style: normal; }

  /* «Фільтри» і «Нове замовлення ▾» — компактні кнопки висотою поля. */
  .hh-tdr-filters .hh-btn--sm { min-height: 36px; padding: 0 10px; font-size: var(--size-caption); }
  /* «Нове замовлення ▾» на телефоні читається як «+ Нове ▾»: обидва
     підписи — справжні елементи (screen-orders.js newDocMenuHtml), тут
     лише перемикаємо, котрий видно. НЕ font-size: 0 + ::before (так було до
     12.10.2026): WebView застосунку й браузери з мінімальним розміром
     шрифту нуль не виконують — кнопка читалась «+ Нове Нове замовлення ▾»,
     а пошук стискався до «Номе». Доступна назва — aria-label кнопки. */
  .hh-tdr-filters .hh-new-doc-menu__full { display: none; }
  .hh-tdr-filters .hh-new-doc-menu__short { display: inline; }
  .hh-tdr-filters [data-act="new-menu"] { white-space: nowrap; }

  /* --- Заголовок дня («СЬОГОДНІ») — дрібна надрядкова мітка ліворуч --- */
  .hh-tdr-table tr.date-group { padding: 0; }
  .hh-tdr-table tr.date-group > td {
    display: block; text-align: left;
    padding: var(--sp-1) var(--sp-4); font-size: 10.5px; line-height: 1.4;
  }
  .hh-tdr-table tr.date-group > td::before { content: none; }

  /* --- Рядок-картка -------------------------------------------------- */
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: var(--sp-1); row-gap: 3px;
    padding: var(--sp-2) var(--sp-4);
  }
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--return {
    padding-left: calc(var(--sp-4) - 3px);
  }
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable::before,
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable::after {
    content: ""; flex: 0 0 100%; height: 0;
  }
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable::before { order: 2; }
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable::after { order: 5; }

  /* 1) тип документа зі стрілкою розкриття …… час */
  .hh-tdr-table tr.hh-table__row--clickable > td.hh-docs-cell--doc { order: 0; flex: 1 1 0; min-width: 0; }
  .hh-tdr-table tr.hh-table__row--clickable > td.hh-docs-cell--time {
    order: 1; flex: none; width: auto; font-size: var(--size-caption); color: var(--text-muted);
  }
  .hh-tdr-table .hh-docs-cell--doc .hh-doc-type { gap: var(--sp-1) !important; font-size: var(--size-small); }
  /* 2) клієнт (+ телефон) …… сума */
  .hh-tdr-table tr.hh-table__row--clickable > td.hh-docs-cell--client {
    order: 3; flex: 1 1 0; min-width: 0; text-align: left;
    font-size: var(--size-caption); line-height: 1.35;
  }
  .hh-tdr-table .hh-docs-cell--client .hh-small { font-size: var(--size-caption); }
  .hh-tdr-table .hh-docs-cell--client .hh-docs-client-phone { display: inline; margin-left: var(--sp-1); }
  .hh-tdr-table tr.hh-table__row--clickable > td.hh-docs-cell--amount {
    order: 4; flex: none; width: auto; min-width: 0; font-size: var(--size-small);
  }

  /* 3) чипи одним рядом */
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable > td.hh-docs-cell--status-order,
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable > td.hh-docs-cell--status-payment,
  .hh-docs-status-group.hh-tdr-table tbody tr.hh-table__row--clickable > td.hh-docs-cell--status-delivery,
  .hh-tdr-table tr.hh-table__row--clickable .hh-docs-paystack,
  .hh-tdr-table tr.hh-table__row--clickable .hh-docs-dlv__line:not(.hh-docs-dlv),
  .hh-tdr-table tr.hh-table__row--clickable .hh-docs-dlv__doc { display: contents; }
  .hh-tdr-table tr.hh-table__row--clickable > td.hh-docs-cell--status-order * { order: 6; }
  .hh-tdr-table tr.hh-table__row--clickable > td.hh-docs-cell--status-payment * { order: 7; }
  .hh-tdr-table tr.hh-table__row--clickable > td.hh-docs-cell--status-delivery * { order: 8; }
  .hh-tdr-table tr.hh-table__row--clickable > td[class*="hh-docs-cell--status-"] .hh-docs-pay-src {
    order: 9; flex: 0 1 auto; min-width: 0;
    font-size: 11px; line-height: 16px; text-align: left; white-space: normal;
  }
  .hh-tdr-table tr.hh-table__row--clickable > td[class*="hh-docs-cell--status-"] .hh-chip,
  .hh-docs-status-group.hh-tdr-table .hh-docs-cell--status-delivery .hh-chip.hh-docs-ttn-chip {
    display: inline-flex; width: auto; max-width: 100%;
    font-size: 10.5px; line-height: 16px; padding: 0 6px; min-height: 0;
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    text-align: left; justify-content: flex-start;
  }
  /* «—» — порожнє місце, не факт; у ряду чипів його не видно. «Немає даних
     про оплату» (hh-chip--nodata) — факт, лишається. */
  .hh-tdr-table tr.hh-table__row--clickable > td[class*="hh-docs-cell--status-"] .hh-chip--dash:not(.hh-chip--nodata) { display: none; }
}

/* Вужче за 390px (iPhone mini/SE, Android 360px) пошуку в одному ряду з
   «Фільтри» й «+ Нове ▾» не вистачає — він займає власний ряд на всю
   ширину, а дві кнопки ділять наступний порівну (власник 12.10.2026).
   Окремим блоком ПІСЛЯ мобільного: ті самі селектори, пізніше — перемагає. */
@media (max-width: 380px) {
  .hh-tdr-filters > .hh-tdr-search { flex: 1 1 100%; }
  .hh-tdr-filters > .hh-docs-filters-trigger,
  .hh-tdr-filters .hh-tdr-chips-row__action { flex: 1 1 0; }
  .hh-tdr-filters .hh-tdr-chips-row__action .hh-new-doc-menu { display: block; }
  .hh-tdr-filters .hh-tdr-chips-row__action [data-act="new-menu"] { width: 100%; }
}

/* ==========================================================================
   Склад: компактні рядки на телефоні (.hh-wh-table, screen-warehouse.js)
   Власник, 06.10.2026 (скрін «Шоуруми → Залишки», «Не оптимізовано»):
   загальна .hh-table--responsive розкладала рядок складу на вісім пар
   «ПІДПИС · значення» — один товар на екран. Той самий renderTable() малює
   і повну сторінку «Склад», і вирізку «Шоуруми → Залишки», тож правило
   одне на обидва місця. На <768px рядок — 2–3 рядки тексту:
     1) назва (переноситься природно) + «вільно» крупно праворуч;
     2) колекція · локація/«N локацій» · комісія (лише коли не «наше») ·
        «N розмірів · M поз. ▾»;
     3) фіз. · резерв · в дорозі · вартість — лише ненульові.
   Рядки 2–3 — .hh-wh-m усередині першої клітинки (кількість <td> не
   змінюється); решту клітинок тут ховаємо. Десктоп не змінюється.
   Фільтри: чіпи кожної групи одним рядом із прокруткою вбік у власних
   межах, пошук на всю ширину 36px.
   ========================================================================== */
.hh-wh-m { display: none; }
.hh-wh-search { max-width: 320px; }
.hh-wh-chiprow { flex-wrap: wrap; }

@media (max-width: 767px) {
  /* --- Фільтри --- */
  .hh-wh-chiprow {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch;
  }
  .hh-wh-chiprow::-webkit-scrollbar { display: none; }
  .hh-wh-chiprow > .hh-chip { flex: none; white-space: nowrap; }
  .hh-wh-filters { gap: var(--sp-2) !important; }
  .hh-wh-filters > * { min-width: 0; max-width: 100%; }
  .hh-wh-filters > .hh-row { flex-wrap: nowrap; flex: 1 1 100%; }
  .hh-wh-staterow { flex-wrap: nowrap; min-width: 0; }
  .hh-wh-search {
    max-width: none; width: 100%;
    min-height: 36px; height: 36px; padding-top: 0; padding-bottom: 0;
  }
  .hh-wh-search::placeholder { font-size: 14px; font-style: normal; }

  /* --- Рядок-картка --- */
  .hh-wh-table.hh-table--responsive tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-2) var(--sp-3);
  }
  .hh-wh-table.hh-table--responsive tbody tr > td { display: none; }
  .hh-wh-table.hh-table--responsive tbody tr > td:first-child {
    display: block; grid-column: 1; grid-row: 1;
    min-width: 0; padding: 0; text-align: left;
    font-size: var(--size-small); line-height: var(--lh-small);
    overflow-wrap: anywhere;
  }
  .hh-wh-table.hh-table--responsive tbody tr > td:first-child::before { content: none; }
  /* Десктопні частини першої клітинки, які на телефоні повторює .hh-wh-m. */
  .hh-wh-table.hh-table--responsive td:first-child > .hh-table__secondary,
  .hh-wh-table.hh-table--responsive td:first-child > .hh-chip--info { display: none; }

  .hh-wh-table.hh-table--responsive tbody tr > td[data-label="Вільно"] {
    display: flex; flex-direction: column-reverse; align-items: flex-end;
    grid-column: 2; grid-row: 1;
    gap: 0; padding: 0; text-align: right;
    font-size: 18px; line-height: 1.15;
  }
  .hh-wh-table.hh-table--responsive tbody tr > td[data-label="Вільно"]::before {
    content: "вільно";
    font-size: 10px; line-height: 12px; letter-spacing: 0; text-transform: none;
  }

  /* «Нижче мінімуму» — тон на всьому рядку-картці, не плямами по клітинках. */
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__row--warn { background: var(--warn-quiet); }
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__row--warn > td { background: transparent; }

  .hh-wh-m { display: block; }
  .hh-wh-m__meta,
  .hh-wh-m__nums {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: var(--size-caption); line-height: var(--lh-caption);
  }
  .hh-wh-m__num { white-space: nowrap; }
  .hh-wh-m__dot { color: var(--text-faint); }
  .hh-wh-m .hh-chip { font-size: 10px; padding: 0 6px; line-height: 15px; vertical-align: 1px; }
  .hh-wh-m__sizes { color: var(--accent); white-space: nowrap; cursor: pointer; }

  /* Розгорнуті розміри — компактний список рядків по одному: «M · Склад ·
     фіз. 3» ліворуч, вільно праворуч; без підпису й рамки між ними. */
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__row--split[aria-expanded="true"] { border-bottom: 0; }
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__sub-row {
    padding: 2px var(--sp-3) 2px calc(var(--sp-3) + var(--sp-3));
    border-bottom: 0;
    background: var(--surface-hover);
  }
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__sub-row > td { background: transparent; border-bottom: 0; }
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__sub-row:not(:has(+ tr.hh-table__sub-row)) {
    padding-bottom: var(--sp-2);
    border-bottom: var(--border-w) solid var(--border-faint);
  }
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__sub-row > td:first-child {
    padding-left: 0; font-size: var(--size-caption); line-height: var(--lh-caption);
  }
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__sub-row > td[data-label="Вільно"] {
    font-size: var(--size-caption); line-height: var(--lh-caption);
  }
  .hh-wh-table.hh-table--responsive tbody tr.hh-table__sub-row > td[data-label="Вільно"]::before { content: none; }
  .hh-wh-m--inline,
  .hh-wh-m--inline .hh-wh-m__nums { display: inline; margin: 0; color: var(--text-muted); }
}

/* Єдиний пікер товару (власник 07.10.2026): результат пошуку — мініатюра +
   назва + колекція, обраний — з ✓; варіанти — чипи з галочками; текст у
   підтвердженні «Надіслати обране» редагується, посилання — ні. */
.hh-comm-presults { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.hh-comm-presult {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-width: 0;
  padding: 4px var(--sp-2) 4px 4px; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
button.hh-comm-presult:hover { background: var(--surface-raised); }
.hh-comm-presult[data-picked], .hh-comm-presult--picked { border-color: var(--accent); }
.hh-comm-presult--picked { cursor: default; margin: var(--sp-2) 0; }
.hh-comm-presult__thumb {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-sunken);
}
.hh-comm-presult__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-comm-presult__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hh-comm-presult__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-comm-presult__check { flex: none; width: 1.2em; color: var(--accent); font-weight: 600; text-align: center; }
.hh-comm-ppanel-variants { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--border-w) solid var(--border); }
.hh-comm-vchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.hh-comm-vchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--sp-2);
  border: var(--border-w) solid var(--border); border-radius: 999px; cursor: pointer;
  font-size: var(--size-small);
}
.hh-comm-vchip[data-checked] { border-color: var(--accent); background: var(--accent-quiet); }
.hh-comm-vchip input[type="checkbox"] { margin: 0; }
.hh-comm-sel-pick { width: 100%; justify-content: flex-start; }
.hh-comm-confirm-text { width: 100%; min-height: 64px; }
.hh-comm-confirm-link {
  padding: 6px var(--sp-2); border-radius: var(--radius-sm); background: var(--surface-sunken);
  color: var(--text-muted); font-size: var(--size-small); overflow-wrap: anywhere; user-select: all;
}
@media (max-width: 767.98px) {
  .hh-comm-confirm-text { min-height: 56px; }
  .hh-comm-presult__thumb { width: 40px; height: 40px; }
}
/* Підтвердження надсилання відкривається ПОВЕРХ попапу «Товар» (той має
   --z-modal, звичайна підкладка — нижче): інакше на телефоні діалог
   ховався під попапом. */
.hh-overlay[data-confirm-overlay] { z-index: calc(var(--z-modal) + 1); }

/* «Порахований товар без позиції каси» (screen-tour-distribution.js,
   unmappedSkusHtml; власник 08.10.2026: «таблиця неакуратна — колонки погано
   розподілені, довгий текст розпирає таблицю»). table-layout: fixed з
   колгрупою: «Пораховано» і «Зміна» — вузькі числові, «Дія» — фіксована
   під список позицій і дві кнопки, «Товар» бере решту й переноситься.
   Довгі пояснення (несписаний рух, попередня версія) — примітками під
   таблицею, у клітинці лише короткий рядок із посиланням ¹. */
.hh-unmapped-table { table-layout: fixed; }
.hh-unmapped-table td { vertical-align: top; overflow-wrap: anywhere; }
.hh-unmapped-col-sizes { width: 34%; }
.hh-unmapped-col-action { width: 340px; }
/* Розміри товару всередині рядка: розмір (з кодом) · пораховано · зміна. */
.hh-unmapped-sizes { display: flex; flex-direction: column; gap: 6px; }
.hh-unmapped-size {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  gap: var(--sp-2); align-items: baseline; font-variant-numeric: tabular-nums;
}
/* Розмір із кодом — довгий SKU переноситься, а не розпирає колонку. */
.hh-unmapped-size__name { min-width: 0; overflow-wrap: anywhere; }
.hh-unmapped-size__qty { white-space: nowrap; text-align: right; }
.hh-unmapped-size__change { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.hh-unmapped-size .hh-code { font-size: var(--size-caption); color: var(--text-muted); }
.hh-unmapped__name { font-weight: var(--weight-medium); }
.hh-unmapped-cell-product .hh-code { font-size: var(--size-caption); }
.hh-unmapped-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hh-unmapped-actions .hh-select { width: 100%; min-width: 0; }
.hh-unmapped-actions > .hh-chip { align-self: flex-start; }
.hh-unmapped-actions__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.hh-unmapped-help { margin: var(--sp-1) 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); }
.hh-unmapped-help b { color: var(--text); font-weight: var(--weight-medium); }
.hh-unmapped-notes { margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.hh-unmapped-notes p { margin: 0; }
.hh-outside-list { margin: var(--sp-1) 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 2px; }
.hh-outside-list__name { color: var(--text); }
.hh-outside-list__code { font-size: var(--size-caption); color: var(--text-muted); }
@media (max-width: 767px) {
  .hh-unmapped-table { table-layout: auto; }
  /* Картка: назва товару — заголовком на всю ширину, дія — блоком під
     числами (список і кнопки на всю ширину картки), без підпису зліва. */
  .hh-table--responsive.hh-unmapped-table td { display: block; text-align: left; }
  .hh-table--responsive.hh-unmapped-table td::before { display: none; }
  .hh-table--responsive.hh-unmapped-table td.hh-unmapped-cell-sizes { padding-top: var(--sp-2); }
  .hh-table--responsive.hh-unmapped-table td.hh-unmapped-cell-action { padding-top: var(--sp-2); }
}

/* Звук нових повідомлень на «Комунікаціях» (816, design/web-push.js) —
   компактний .hh-switch над списком, підказка дрібно поруч; без власної
   картки, щоб не з'їдати висоту лівої колонки. */
.hh-comm-sound { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2); }
.hh-comm-sound .hh-switch { min-height: 0; gap: var(--sp-2); }
.hh-switch input:disabled + .hh-switch__track { opacity: .5; cursor: not-allowed; }
.hh-web-push__state--ok { color: var(--ok); }
.hh-web-push__state--muted { color: var(--text-muted); }

/* ===========================================================================
   Час за Києвом + місцевий час пристрою (HH_FMT.withLocal, fmt-date.js;
   рішення власника 08.10.2026). Головний рядок — київський, як був; під ним
   дрібно й приглушено «місцевий час 11:40» — лише коли зсув пристрою в ту
   мить інший. Обгортка inline-flex, щоб другий рядок став під часом, а не
   розсунув сусідній текст у рядку.
   ======================================================================== */
.hh-kyiv-time--stack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; vertical-align: top; }
.hh-kyiv-time__local { display: block; font-size: 11px; line-height: 1.3; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.hh-kyiv-time[title] { cursor: help; }
/* «Київ» біля головного часу — лише поза київським поясом (fmt-date.js withLocal). */
.hh-kyiv-time__zone { font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--text-muted); white-space: nowrap; }

/* «Гроші → Головна», залишки по рахунках (Роман, 09.10.2026): зліва банки,
   справа каси (.hh-split — одна колонка до 768px). Картка без внутрішнього
   відступу по краях таблиці: рядки «назва — сума» читаються як виписка,
   сума праворуч у тому самому стовпчику, «у CORE …» — дрібно під нею,
   лише коли відрізняється від банку. */
.hh-money-bal__col { padding: var(--sp-4); min-width: 0; }
.hh-money-bal__stack { display: grid; gap: var(--sp-3); min-width: 0; }
.hh-money-bal__title { margin: 0 0 var(--sp-2); }
.hh-money-bal__table { width: 100%; }
.hh-money-bal__table td { padding: var(--sp-2) var(--sp-1); vertical-align: top; }
.hh-money-bal__name { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.hh-money-bal__name:hover { text-decoration: underline; }
.hh-money-bal__sum { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
.hh-money-bal__line { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
/* Значок джерела цифри: «Банк» / «Finmap» / «CORE». Підказка «на яку годину» —
   title на десктопі; на телефоні наведення немає, тож там час — підписом. */
.hh-money-bal__src {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 999px;
  font-size: var(--size-caption); line-height: 16px; font-weight: var(--weight-medium);
  border: var(--border-w) solid var(--border); color: var(--text-muted); cursor: default;
}
.hh-money-bal__src--bank { color: var(--text); }
.hh-money-bal__src--finmap { color: var(--text); }
.hh-money-bal__src--core { border-style: dashed; }
.hh-money-bal__logo { width: 12px; height: 12px; border-radius: 50%; display: block; }
.hh-money-bal__when { display: none; width: 100%; text-align: right; }
@media (max-width: 767px) { .hh-money-bal__when { display: block; order: 3; } }
.hh-money-bal__table tfoot td { padding: var(--sp-2) var(--sp-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh-money-bal__personal > summary { list-style-position: inside; }

/* ---------------------------------------------------------------------------
   Соцмережі артиста (design/artist-social.js, 825): рядок іконок у шапці,
   блок «Сайт і соцмережі» з числом, зміною й трендом, редактор посилань.
   ------------------------------------------------------------------------- */
.hh-social-icon { flex: none; vertical-align: middle; }
.hh-social-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.hh-social-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none;
  font-size: var(--text-sm, 13px); font-variant-numeric: tabular-nums; background: var(--surface);
}
.hh-social-chip:hover { border-color: var(--text-muted); }
.hh-social { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.hh-social__row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3);
  align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--border);
}
.hh-social__row:first-child { border-top: 0; }
.hh-social__ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text); }
.hh-social__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-social__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-social__note { color: var(--warn); }
.hh-social__num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.hh-social__count { font-size: var(--text-lg, 17px); }
.hh-social__chg { font-size: var(--text-xs, 12px); white-space: nowrap; }
.hh-social__chg--up { color: var(--ok); }
.hh-social__chg--down { color: var(--danger); }
.hh-social__trend { grid-column: 2 / 4; color: var(--text-muted); }
.hh-social__trend:empty { display: none; }
.hh-social__spark { display: block; }
.hh-social__act { grid-column: 2 / 4; }
.hh-social__manual { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; padding: var(--sp-3); border-radius: var(--r-md, 10px); background: var(--surface-sunken, var(--bg)); }
.hh-social__manual .hh-field { flex: 1 1 140px; }
.hh-social__btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hh-social__err { color: var(--danger); }
.hh-social__legend { margin-top: var(--sp-3); }
.hh-social__sugg { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hh-social__sugg-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* Пропозиції CORE AI (851): дві кнопки поруч, на телефоні — під текстом. */
.hh-social__ai { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--border); }
.hh-social__ai .hh-social__act { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hh-social-edit__list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hh-social-edit__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px; gap: var(--sp-2); align-items: start; }
.hh-social-edit__row .hh-social__ic { margin-top: 6px; }
.hh-social-edit__fields { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
@media (min-width: 900px) {
  .hh-social__row { grid-template-columns: 28px minmax(0, 1fr) auto; }
}

/* Згенероване зображення розмірної сітки (src/lib/size-chart-image.js) у
   картці сітки. SVG має власні px-розміри; без max-width/height:auto рамка
   з overflow:hidden ОБРІЗАЛА широку сітку (на телефоні — 1–2 колонки з
   п'яти), а не зменшувала її. Правило діє й на SVG, згенеровані до v2. */
.hh-size-chart-image { border: 1px solid var(--border, #ddd2c2); border-radius: var(--radius-md, 8px); overflow: hidden; max-width: 640px; }
.hh-size-chart-image > svg { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   X · ТЕРМІНАЛИ (design/screen-x-terminals.js, 09.10.2026)
   Картка «Термінали» на Головній X (групи за артистом) і екран-таблиця
   «термінали × дні»: ліва колонка й рядок дат закріплені, усі колонки днів
   однакової ширини (table-layout: fixed), висота рядка стала — вміст
   клітинки не зсуває сітку.
   ========================================================================== */
.hh-xt-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.hh-xt-back { margin-left: calc(-1 * var(--sp-2)); }
.hh-xt-filters { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hh-xt-filters__status { gap: var(--sp-2); flex-wrap: wrap; }
.hh-xt-filter__n { font-variant-numeric: tabular-nums; color: var(--text-muted); margin-left: 2px; }
.hh-xt-filter--problem .hh-xt-filter__n { color: var(--warn); font-weight: 600; }
.hh-xt-banner { margin-bottom: var(--sp-3); }
.hh-xt-banner--danger { border-color: var(--danger-border); background: var(--danger-quiet); }
.hh-xt-banner--danger .hh-banner__title { color: var(--danger); }
.hh-xt-banner__list { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.hh-xt-refresh { margin-bottom: var(--sp-2); }
.hh-xt-tone--ok { color: var(--ok); }
.hh-xt-tone--warn { color: var(--warn); }
.hh-xt-tone--danger { color: var(--danger); }

/* --- Сітка --- */
.hh-xt-grid-wrap {
  --xt-term-w: 148px; --xt-day-w: 112px; --xt-row-h: 74px;
  border: var(--border-w) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: auto; max-width: 100%; max-height: calc(100vh - 260px); min-height: 160px;
  overscroll-behavior-x: contain;
}
.hh-xt-grid { table-layout: fixed; border-collapse: separate; border-spacing: 0; min-width: 100%; }
.hh-xt-grid__tcol { width: var(--xt-term-w); }
.hh-xt-grid__dcol { width: var(--xt-day-w); }
.hh-xt-grid th, .hh-xt-grid td {
  border-bottom: var(--border-w) solid var(--border-faint); border-left: var(--border-w) solid var(--border-faint);
  padding: 0;
}
.hh-xt-grid thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface); height: 40px;
  font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted);
  text-align: center; border-bottom-color: var(--border);
}
.hh-xt-grid__day span { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-xt-grid__day b { display: block; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.hh-xt-grid__day.is-weekend span { color: var(--text-faint); }
.hh-xt-grid__day.is-today { color: var(--x-moss); background: var(--x-moss-tint); }
.hh-xt-grid__day.is-today b { color: var(--x-moss); }
.hh-xt-grid__corner { left: 0; z-index: 4 !important; text-align: left !important; padding: 0 12px !important; border-left: 0 !important; }
.hh-xt-grid__term {
  position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left;
  border-left: 0 !important; border-right: var(--border-w) solid var(--border) !important;
}
.hh-xt-row.is-conflict .hh-xt-grid__term { box-shadow: inset 3px 0 0 var(--danger); }
.hh-xt-row.is-warn .hh-xt-grid__term { box-shadow: inset 3px 0 0 var(--warn); }
.hh-xt-term {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: var(--xt-row-h);
  padding: 0 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); font: inherit;
}
.hh-xt-term:hover { background: var(--surface-hover); }
.hh-xt-term__name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-xt-term__sub { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-xt-cell { height: var(--xt-row-h); vertical-align: middle; }
.hh-xt-cell.is-today { background: var(--x-moss-tint); }
.hh-xt-ev {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: calc(100% - 6px); height: calc(var(--xt-row-h) - 8px); margin: 0 3px; padding: 3px 4px;
  border: var(--border-w) solid var(--pc-border, var(--border)); border-radius: var(--radius-sm);
  background: var(--pc-bg, var(--surface-sunken)); color: var(--pc-text, var(--text));
  font: inherit; cursor: pointer; overflow: hidden;
}
.hh-xt-ev:hover { filter: brightness(.97); }
.hh-xt-ev:focus-visible, .hh-xt-term:focus-visible, .hh-xt-card__toggle:focus-visible { outline: var(--focus-w, 2px) solid var(--accent); outline-offset: -2px; }
.hh-xt-ava {
  width: 24px; height: 24px; font-size: 9px; font-weight: 700;
  background: var(--surface); color: var(--pc-text, var(--text-muted));
  border: 1.5px solid var(--pc-border, var(--border-strong));
}
.hh-xt-ava:has(.hh-avatar__photo) { border-width: 0; }
.hh-xt-ava--cell { flex: none; margin-bottom: 1px; }
.hh-xt-ev__name, .hh-xt-ev__city { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.hh-xt-ev__name { font-size: 11px; font-weight: 600; }
.hh-xt-ev__city { font-size: 10.5px; opacity: .85; font-variant-numeric: tabular-nums; }
.hh-xt-ev.is-past { opacity: .55; }
.hh-xt-ev.is-live { box-shadow: 0 0 0 2px var(--ok); }
.hh-xt-ev.is-conflict {
  background: repeating-linear-gradient(135deg, var(--danger-quiet) 0 5px, transparent 5px 10px);
  border-color: var(--danger); color: var(--danger);
}
.hh-xt-ev__flag {
  position: absolute; top: 2px; right: 3px; width: 14px; height: 14px; border-radius: var(--radius-full);
  background: var(--warn); color: var(--surface); font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}
.hh-xt-ev.is-conflict .hh-xt-ev__flag { background: var(--danger); }
.hh-xt-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; margin: var(--sp-2) 2px 0; font-size: 11px; color: var(--text-muted); }
.hh-xt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hh-xt-legend__sw { display: inline-block; width: 18px; height: 12px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface-sunken); }
.hh-xt-legend__sw--ev { background: var(--x-chip-bg); border-color: var(--x-chip-border); }
.hh-xt-legend__sw--live { box-shadow: 0 0 0 1.5px var(--ok); }
.hh-xt-legend__sw--danger { border-color: var(--danger); background: repeating-linear-gradient(135deg, var(--danger-quiet) 0 4px, transparent 4px 8px); }
.hh-xt-artist { display: inline-flex; align-items: center; gap: var(--sp-2); }

@media (max-width: 767px) {
  .hh-xt-grid-wrap { --xt-term-w: 96px; --xt-day-w: 92px; --xt-row-h: 70px; max-height: 70vh; }
  .hh-xt-term { padding: 0 8px; }
  .hh-xt-grid__corner { padding: 0 8px !important; }
}

/* --- Картка на Головній X: згорнута «Термінали · N» + підсумок; розгорнута —
   простий список терміналів. Згорнута висота стала, тож завантаження не
   зсуває «Актуальні тури» нижче. --- */
.hh-xt-card__head { display: flex; align-items: center; gap: var(--sp-2); }
.hh-xt-card__toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); min-height: 40px;
  margin: -4px 0 -4px -8px; padding: 0 4px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.hh-xt-card__toggle:hover:not(:disabled) { background: var(--surface-hover); }
.hh-xt-card__toggle:disabled { cursor: default; }
.hh-xt-card__title { display: flex; flex-direction: column; min-width: 0; }
.hh-xt-card__sum { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-xt-tlist { list-style: none; margin: 0; padding: 0; border-top: var(--border-w) solid var(--border-faint); }
.hh-xt-tlist__row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: center;
  min-height: 36px; padding: 4px 2px; color: var(--text); text-decoration: none; font-size: 12.5px;
}
.hh-xt-tlist li + li .hh-xt-tlist__row { border-top: var(--border-w) solid var(--border-faint); }
.hh-xt-tlist__row:hover { background: var(--surface-hover); }
.hh-xt-tlist__name { font-weight: 600; white-space: nowrap; }
.hh-xt-tlist__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-xt-tlist__meta--free { color: var(--text-faint); }
.hh-xt-concerts { margin-bottom: var(--sp-4); }
.hh-xt-card { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: 13px 14px; }

/* --- «Склади турів» (12.10.2026, design/screen-x-tour-warehouses.js): картка
   під «Термінали» (та сама .hh-xt-card) і модалка з таблицею й правкою в
   рядку. На телефоні таблиця прокручується вбік у своїй обгортці. --- */
.hh-xtw-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-w) solid var(--border-faint); }
.hh-xtw-list__row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: center;
  min-height: 36px; padding: 4px 2px; font-size: 12.5px;
}
.hh-xtw-list__row + .hh-xtw-list__row { border-top: var(--border-w) solid var(--border-faint); }
.hh-xtw-list__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-xtw-list__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.hh-xtw-list__qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-xtw-table-wrap { overflow-x: auto; }
.hh-xtw-table { min-width: 960px; }
.hh-xtw-table th.hh-num, .hh-xtw-table td.hh-num { text-align: right; white-space: nowrap; }
.hh-xtw-cell {
  display: inline-flex; align-items: center; min-height: 28px; margin: -4px -6px; padding: 2px 6px;
  border: var(--border-w) dashed transparent; border-radius: var(--radius-sm);
  background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer;
}
.hh-xtw-cell:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.hh-xtw-cell:focus-visible { outline: var(--focus-w, 2px) solid var(--accent); outline-offset: 1px; }
.hh-xtw-edit { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; }
.hh-xtw-edit__err { display: block; color: var(--danger); margin-top: 2px; }
.hh-xtw-locked { cursor: help; }
.hh-xtw-lock-note { display: block; font-size: 10.5px; color: var(--text-faint); }

/* --- Шухляда термінала: справа на десктопі, аркуш знизу з вкладками на телефоні --- */
.hh-xt-drawer-ov { position: fixed; inset: 0; background: rgba(10, 7, 5, 0.45); z-index: var(--z-overlay); }
.hh-xt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 540px; max-width: 100%;
  background: var(--surface-raised); box-shadow: var(--shadow-overlay); border-left: var(--border-w) solid var(--border);
  display: flex; flex-direction: column; z-index: var(--z-modal);
}
.hh-xt-drawer__head { position: relative; padding: 14px 16px 10px; border-bottom: var(--border-w) solid var(--border); }
.hh-xt-drawer__x { position: absolute; top: 10px; right: 10px; }
.hh-xt-drawer__title { gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: 2px; padding-right: 40px; }
.hh-xt-drawer__grip { display: none; }
.hh-xt-drawer__tabs { display: none; gap: 6px; overflow-x: auto; margin-top: var(--sp-2); scrollbar-width: none; }
.hh-xt-drawer__body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: var(--sp-4); }
.hh-xt-sec__h { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.hh-xt-sec__h ~ .hh-xt-sec__h { margin-top: var(--sp-4); }
.hh-xt-sec__aside { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-faint); font-size: 11px; margin-left: 6px; }
.hh-xt-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 12.5px; }
.hh-xt-kv dt { color: var(--text-muted); }
.hh-xt-kv dd { margin: 0; font-weight: 500; min-width: 0; }
.hh-xt-focus { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 8px; font-size: 12.5px; }
.hh-xt-focus__k { font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.hh-xt-focus__none { margin: 0 0 6px; }
.hh-xt-issues { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.hh-xt-issues li { padding: 6px 10px; border-radius: var(--radius-sm); border: var(--border-w) solid var(--warn-border); background: var(--warn-quiet); }
.hh-xt-issues li.is-danger { border-color: var(--danger-border); background: var(--danger-quiet); color: var(--danger); }
.hh-xt-actions { gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.hh-xt-bars { display: flex; flex-direction: column; gap: 6px; }
.hh-xt-bar { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: var(--sp-2); align-items: end; font-size: 12.5px; }
.hh-xt-bar__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-xt-bar__tr { display: block; height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; margin-top: 3px; }
.hh-xt-bar__tr i { display: block; height: 100%; background: var(--x-moss); }
.hh-xt-bar__q { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hh-xt-chips { gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.hh-xt-cat td { font-size: 12px; }
.hh-xt-upload { margin-top: var(--sp-2); }
.hh-xt-nodata { margin-top: var(--sp-2); padding: 9px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 12px; color: var(--text-muted); }
.hh-xt-nodata b { color: var(--text); font-weight: 600; }
.hh-xt-chip--nodata { background: transparent; border-style: dashed; color: var(--text-faint); }
.hh-xt-tl { list-style: none; margin: 0 0 var(--sp-2); padding: 0; position: relative; }
.hh-xt-tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.hh-xt-tl li { position: relative; padding: 3px 0 9px 22px; font-size: 12.5px; }
.hh-xt-tl li::before {
  content: ""; position: absolute; left: 1px; top: 7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-raised); border: 2px solid var(--border-strong);
}
.hh-xt-tl__w { font-weight: 600; color: inherit; text-decoration: none; }
.hh-xt-tl__w:hover { text-decoration: underline; }
.hh-xt-tl__m { display: block; font-size: 11px; color: var(--text-muted); }
.hh-xt-tl li.is-past { color: var(--text-muted); }
.hh-xt-tl li.is-now::before { border-color: var(--ok); background: var(--ok); }
.hh-xt-tl li.is-danger::before { border-color: var(--danger); background: var(--danger-quiet); }
.hh-xt-tl li.is-danger .hh-xt-tl__m { color: var(--danger); }

@media (max-width: 767px) {
  .hh-xt-drawer {
    top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
  .hh-xt-drawer__grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: -6px auto 8px; }
  .hh-xt-drawer__tabs { display: flex; }
  .hh-xt-drawer[data-tab="now"] .hh-xt-sec:not([data-xt-sec="now"]),
  .hh-xt-drawer[data-tab="catalog"] .hh-xt-sec:not([data-xt-sec="catalog"]),
  .hh-xt-drawer[data-tab="plan"] .hh-xt-sec:not([data-xt-sec="plan"]),
  .hh-xt-drawer[data-tab="tech"] .hh-xt-sec:not([data-xt-sec="tech"]) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hh-xt-ev:hover { filter: none; } }
/* «Meta Ads: сповіщення» (design/meta-ads-alerts.js) — блок на Маркетинг →
   Головна (додаток) і Маркетинг → Сьогодні (сайт). Червона смуга — лише
   проблема з оплатою зараз; збої за 30 днів — жовта. */
.hh-meta-alerts { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
/* Місце під згорнутий блок (заголовок + рядок оплати + «До сплати» + «Деталі») резервуємо ще на
   «Питаю Meta…» — стрічка під ним не стрибає, коли приходить відповідь. */
.hh-meta-alerts__wait { min-height: 4.5rem; }
.hh-meta-alerts__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hh-meta-alerts__title { font-weight: 600; margin-right: auto; }
.hh-meta-alerts__pay { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius, 10px); border: var(--border-w, 1px) solid; font-size: var(--size-small); }
.hh-meta-alerts__pay--now { color: var(--danger); background: var(--danger-quiet); border-color: var(--danger-border); }
.hh-meta-alerts__pay--recent { color: var(--warn); background: var(--warn-quiet); border-color: var(--warn-border); }
.hh-meta-alerts__account { display: flex; flex-direction: column; gap: 6px; }
.hh-meta-alerts__kv, .hh-meta-alerts__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.hh-meta-alerts__reason { font-size: var(--size-small); color: var(--text-muted); }
.hh-meta-alerts__h { margin: var(--sp-2) 0 0; font-weight: 600; font-size: var(--size-small); }
.hh-meta-alerts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hh-meta-alerts__item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: var(--border-w, 1px) solid var(--border); }
.hh-meta-alerts__item:last-child { border-bottom: none; }
.hh-meta-alerts__toggle { align-self: flex-start; }
.hh-meta-alerts__caption { margin-top: var(--sp-1); }
/* Компактна картка (10.10.2026): у правій колонці «Сьогодні» відступ дає gap
   колонки; «Деталі» — плоский стовпчик під кнопкою. */
.hh-mkt-split__side .hh-meta-alerts { margin-bottom: 0; }
.hh-meta-alerts__details { display: flex; flex-direction: column; gap: var(--sp-2); }
/* --------------------------------------------------------------------------
   «На сайті бракує перекладу чи SEO» (design/site-gaps.js, доручення власника
   09.10.2026) — один блок на Маркетинг → Сьогодні («Новий сайт») і вгорі
   Каталогу. Перелік — панель ПОВЕРХ вмісту (не акордеон, що розсуває
   екран), із власним скролом. Рядок не вилазить за край: назва й теги —
   flex із переносом і min-width:0 (живий баг: nowrap-підпис у flex-рядку без
   min-width:0 виштовхував список за правий край картки).
   -------------------------------------------------------------------------- */
.hh-sg { position: relative; min-width: 0; }
.hh-sg--mkt { margin: var(--sp-2) 0; }
.hh-sg--catalog { margin-bottom: var(--sp-3); }
.hh-sg__bar { flex-wrap: wrap; align-items: center; }
.hh-sg__toggle {
  flex: 1 1 14em; min-width: 0; display: flex; align-items: flex-start; gap: var(--sp-1);
  text-align: left; cursor: pointer; border: none; background: none; color: var(--text);
  font: inherit; font-size: var(--size-small); padding: var(--sp-1) 0; min-height: 36px;
}
.hh-sg__toggle .hh-banner__title { overflow-wrap: anywhere; }
.hh-sg__chev { flex: none; width: 1em; }
.hh-sg__ai { flex: none; }
.hh-sg__panel {
  position: absolute; top: calc(100% + var(--sp-1)); right: 0;
  width: max(100%, min(520px, calc(100vw - 2 * var(--sp-4))));
  max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  z-index: calc(var(--z-sticky) + 1);
  background: var(--surface-raised); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.hh-sg--catalog .hh-sg__panel { left: 0; width: auto; }
.hh-sg__group { margin: var(--sp-2) 0 var(--sp-1); }
.hh-sg__list, .hh-sg-m__list {
  display: flex; flex-direction: column; min-width: 0;
  border: var(--border-w) solid var(--border-faint); border-radius: var(--radius);
}
.hh-sg__row {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-3); row-gap: 2px;
  min-width: 0; padding: var(--sp-2) var(--sp-3); text-decoration: none; color: inherit;
  border-bottom: var(--border-w) solid var(--border-faint);
}
.hh-sg__row:last-child { border-bottom: 0; }
.hh-sg__row:hover { background: var(--surface-hover); }
.hh-sg__name { flex: 1 1 14em; min-width: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.hh-sg__tags { flex: 0 1 auto; min-width: 0; font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-muted); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .hh-sg__panel { left: 0; right: 0; width: auto; max-height: 65vh; }
  .hh-sg__ai { width: 100%; justify-content: center; }
}

/* Модалка «Генерація SEO та перекладів». */
.hh-sg-modal { max-width: min(860px, 96vw); }
.hh-sg-m__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.hh-sg-m__opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hh-sg-m__selbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hh-sg-m__sellinks { display: flex; gap: var(--sp-3); }
.hh-sg-m__row { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-faint); }
.hh-sg-m__row:last-child { border-bottom: 0; }
.hh-sg-m__row--pick { flex-direction: row; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.hh-sg-m__row input[type="checkbox"], .hh-sg-m__nocheck { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }
.hh-sg-m__rowhead { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.hh-sg-m__rowtext { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-3); row-gap: 2px; }
.hh-sg-m__st { font-size: var(--size-caption); line-height: var(--lh-caption); overflow-wrap: anywhere; }
.hh-sg-m__st--ok { color: var(--ok); }
.hh-sg-m__st--err { color: var(--danger); }
.hh-sg-m__fields { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: calc(20px + var(--sp-3)); min-width: 0; }
.hh-sg-m__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-sg-m__flabel { font-size: var(--size-caption); color: var(--text-muted); }
.hh-sg-m__loc { font-size: var(--size-caption); padding: 0 6px; min-height: 0; }
.hh-sg-m__val { width: 100%; min-width: 0; box-sizing: border-box; }
textarea.hh-sg-m__val { resize: vertical; }
/* Rich-text значення (опис товару тощо) — відформатований блок замість коду; висота як у textarea rows=3, далі власний скрол. */
.hh-sg-m__rich { min-height: 4.5em; max-height: 14em; overflow-y: auto; height: auto; }
.hh-sg-m__rich[contenteditable="false"] { cursor: default; }
.hh-sg-m__note { margin-top: var(--sp-3); }
.hh-sg-m__progress { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.hh-sg-m__track { height: 6px; border-radius: 3px; background: var(--border-faint); overflow: hidden; }
.hh-sg-m__track > span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.hh-sg-m__confirm { flex: 1; align-self: center; }
@media (max-width: 767px) {
  .hh-sg-m__fields { padding-left: 0; }
}

/* Склад: кнопка розмірів групи («2 розміри · 2 поз. ▾», screen-warehouse.js
   sizesToggleHtml). Справжня <button> (не span у рядку): скидаємо
   браузерні рамку/фон/шрифт, лишаючи вигляд чіпа/посилання; ▾ повертається
   відкритим — той самий принцип, що .hh-row-toggle. */
.hh-wh-sizes-btn { font-family: inherit; cursor: pointer; }
.hh-wh-m__sizes.hh-wh-sizes-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); white-space: nowrap; }
.hh-wh-sizes-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hh-wh-caret { display: inline-block; transition: transform var(--dur) var(--ease); }
.hh-wh-sizes-btn[aria-expanded="true"] .hh-wh-caret { transform: rotate(180deg); }

/* «Продакшн → Головна» (screen-production-home.js, власник 12.10.2026):
   шапка блоку — заголовок секції 12px uppercase ліворуч і «Усі →» праворуч
   (дизайн-код §3); колонки — .hh-split--2-1 (одна під одною до 768px). */
.hh-ph-grid { margin-top: var(--sp-2); }
.hh-ph-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.hh-ph-head .hh-overline { margin: 0; }
.hh-ph-more { font-size: 11px; white-space: nowrap; }
/* «Показати ще N» / «Згорнути» під списком блоку Головної (list-collapse.js). */
.hh-ph-toggle { margin-top: var(--sp-2); }

/* ===== «Потреби X» — матриця поставок на склади турів (design/needs-x-matrix.js,
   власник 12.10.2026). Ширини ФІКСОВАНІ: table-layout: fixed, одна ширина на
   всі стовпці концертів (і «×2», і «Разом») — --nx-col-w, перша колонка —
   --nx-type-w; вміст переноситься/обрізається, стовпець від нього не росте.
   Сайт і додаток — та сама розмітка: горизонтальний скрол, вид товару
   приклеєний зліва, «Разом» — справа. */
.nx-root { --nx-type-w: 132px; --nx-col-w: 72px; }
/* Легенда — компактна: дві колонки коротких пунктів зі зразком клітинки. */
.nx-legend { margin: 0 0 var(--sp-3); padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); max-width: 760px; font-size: 12px; color: var(--text-muted); }
.nx-legend__sum { cursor: pointer; font-weight: 600; color: var(--text); font-size: 12px; padding: 2px 0; }
.nx-legend[open] .nx-legend__sum { display: none; }
.nx-legend__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; }
.nx-legend__item { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 8px; line-height: 1.3; }
.nx-legend__mode { margin: 5px 0 0; line-height: 1.35; }
.nx-key { justify-self: start; padding: 1px 5px; border-radius: 5px; text-align: center; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-faint); white-space: nowrap; }
.nx-key b { color: var(--text); font-size: 12px; }
.nx-key--mark { color: var(--warn); font-weight: 700; }
.nx-key--qty { background: var(--info-quiet); }
.nx-key--late { background: var(--danger-quiet); }
.nx-key--late, .nx-key--late b { color: var(--danger); }
.nx-key--runout { box-shadow: inset 0 0 0 2px var(--warn); }
.nx-bar { margin-bottom: 8px; }
.nx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.nx-tour { margin-bottom: 20px; }
.nx-tour__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.nx-tour__title { font-weight: 600; margin: 0; }
.nx-warn { color: var(--warn); }
/* «Доставка: N дн.» / «Прогноз на: N дн.» — клік правити, без збереження. */
.nx-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.nx-param { cursor: pointer; }
.nx-param--over { border-color: var(--info-border); background: var(--info-quiet); color: var(--info); }
.nx-param--edit { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.nx-param__input { width: 64px; }
.nx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table.nx { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
table.nx col.nx-colw-type { width: var(--nx-type-w); }
table.nx col.nx-colw { width: var(--nx-col-w); }
table.nx th, table.nx td { padding: 6px 6px; border-bottom: 1px solid var(--border-faint); border-left: 1px solid var(--border-faint); overflow: hidden; text-overflow: ellipsis; }
table.nx thead th { font-weight: 500; color: var(--text-muted); font-size: 12px; text-align: center; vertical-align: bottom; background: var(--surface); white-space: normal; }
table.nx thead th.nx-col { padding: 5px 3px; }
table.nx .nx-d { display: block; color: var(--text); font-weight: 600; white-space: nowrap; letter-spacing: -0.2px; }
table.nx .nx-d sup { font-size: 9.5px; vertical-align: super; line-height: 0; margin-left: 1px; }
table.nx .nx-x { color: var(--info); font-weight: 700; }
table.nx .nx-guess { color: var(--warn); font-weight: 700; }
/* Місто — дрібніше, до двох рядків, без «…»: перенос по межі складу
   (м'який перенос із JS), відомі довгі назви скорочено. */
table.nx .nx-city { display: block; font-size: 10.5px; letter-spacing: -0.2px; line-height: 1.2; white-space: normal;
  overflow-wrap: normal; word-break: normal; hyphens: manual; max-height: 2.4em; overflow: hidden; }
table.nx .nx-type { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; border-left: 0; box-shadow: 1px 0 0 var(--border); }
table.nx tbody .nx-type { cursor: help; }
table.nx .nx-tn { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.nx .nx-sub { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.nx .nx-type .nx-sub { line-height: 1.3; }
table.nx .nx-other { text-decoration: underline dotted; text-underline-offset: 2px; }
table.nx .nx-c { text-align: center; white-space: nowrap; cursor: help; }
table.nx .nx-c b { font-size: 15px; color: var(--text); }
table.nx .nx-c--qty { background: var(--info-quiet); }
table.nx .nx-c--late { background: var(--danger-quiet); }
table.nx .nx-c--late b, table.nx .nx-c--late .nx-sub { color: var(--danger); }
table.nx .nx-c--runout { box-shadow: inset 0 0 0 2px var(--warn); }
table.nx .nx-c--runout b { font-weight: 800; }
table.nx .nx-after { color: var(--text-muted); font-size: 12px; }
table.nx .nx-total { position: sticky; right: 0; z-index: 1; text-align: right; background: var(--surface-hover); box-shadow: -1px 0 0 var(--border); white-space: nowrap; }
table.nx tbody tr:last-child th, table.nx tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
  .nx-root { --nx-type-w: 112px; --nx-col-w: 64px; }
  .nx-legend__grid { grid-template-columns: minmax(0, 1fr); }
  .nx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nx-chips .hh-chip { flex: none; }
  .nx-bar .hh-segmented { width: 100%; }
  .nx-bar .hh-segmented__item { flex: 1; }
}