/* v1.1.6.303 (REV46): радіус панелей зведено до канонного --kp-radius-lg.
   Перепис: у пакеті 690 справжніх панелей (тло + рамка + радіус, не контроли)
   і 68 різних радіусів. Найпоширеніший — уже канонний (91), далі йдуть 10px
   (86), 14px (59) і --n-r-md, який теж 14px (58): три сусідні значення для
   одного й того самого — картки. Канон для неї однозначний:
   `.kp-card { border-radius: var(--kp-radius-lg) }`.
   Контроли (кнопки, чипи, аватари, поля) з проходу виключені: там канон
   справді вживає 10-11px, і зводити їх до 12 означало б відійти ВІД прев'ю.
   `--r` (20px) теж не чіпано — це інший рівень, а не сусіднє значення. */
/* v1.1.6.291 (REV46, CANON-STEP-8): значення, які ВЖЕ дорівнювали кроку
   канонної шкали, отримали її ім'я: радіус 2, pill 0,
   відступи 4, вага 0. Жодне число не змінено — це
   перейменування, не редизайн. Значення поза шкалою лишились літералами
   свідомо: прев'ю канону саме вживає 10/14/6px для падінгів компонентів,
   тож стягувати їх до шкали означало б відійти ВІД прев'ю, а не до нього. */
/* v1.1.6.290 (REV46, CANON-STEP-7): 7 значень font-size переведено на
   канонну шкалу (--kp-text-xs/sm/md/lg/xl/2xl). Правило: найближчий крок,
   і лише коли зміна ≤12%%. Все, що далі (герой-цифри 3-5rem, мікропідписи
   <0.6rem), лишилось літералом — це не текстова шкала. Перелік: _meta/. */
/* app-shell.css · v1.1.6.286 (REV46, CANON-STEP-3)
 * ============================================================================
 * ОБОЛОНКА СТОРІНКИ — те, що мусить бути на КОЖНІЙ сторінці.
 *
 * 🔴 ЧОМУ ЦЕЙ ФАЙЛ ВЗАГАЛІ З'ЯВИВСЯ.
 *
 * ThemeManager (рядки 1397–1407) підключає РІВНО ОДИН layout-CSS через `match`:
 *   messages → messages-layout.css, auth → auth-layout.css, … default → app-layout.css
 *
 * Тобто `app-layout.css` вантажиться на layout «app» — одному з дев'яти. А в ньому
 * лежали правила, писані як загальні. На восьми інших layout-ах їх просто немає:
 *
 *  1. `html { scroll-padding-top/bottom }` — фікс v1.1.5.917 («Tab-фокус і перехід
 *     за #якорем не ставлять ціль під липку шапку й нижню навігацію»). Працював на
 *     ОДНОМУ layout-і з дев'яти. На auth, admin, profile, account, communities,
 *     listings, arena, messages ціль і далі опинялась під шапкою.
 *
 *  2. `.kp-refshare` — кнопка «поділитися сторінкою». `body_chrome.php` підключає
 *     `ref_share.php` на всіх дев'яти layout-ах, а показується вона на шляхах
 *     `/posts/ /listings/ /communities/ /arena/battle/ /media/ /guides/`
 *     (ReferralLinkBuilder::SHAREABLE_PREFIXES). З них `/listings/`, `/communities/`
 *     і `/arena/battle/` мають ВЛАСНІ layout-и → `app-layout.css` там не вантажиться
 *     → FAB не фіксований, не круглий, а панель QR вивалюється в потік сторінки.
 *     Три з шести родин маршрутів, де кнопка взагалі існує.
 *
 *  3. `.container` і базова частина `.app-page-wrapper` — через їх відсутність кожен
 *     layout переоголошував `display:flex; flex-direction:column; width:100%;
 *     margin-inline:auto` у себе. Це була не надлишковість, а КОМПЕНСАЦІЯ: видалити
 *     їх «як дублі» (перша спокуса) означало б зламати вісім layout-ів. Правильний
 *     бік — підняти базу сюди, і тоді компенсація стає непотрібною.
 *
 * ПОРЯДОК ПІДКЛЮЧЕННЯ (перевірено в ThemeManager): `style.css` друкується РАНІШЕ,
 * ніж `renderCss()` віддає layout-CSS. Специфічність `.container` і `.container--X`
 * однакова (0,1,0), тож при рівності виграє пізніший — layout. Саме тому база тут
 * безпечна: кожен із восьми layout-ів перевизначає `max-width` і `padding` у себе,
 * і його значення лишається чинним.
 *
 * ЩО СВІДОМО НЕ ПЕРЕНЕСЕНО: `.app-page-wrapper { min-height: calc(100vh − шапка −
 * підвал) }`. Воно лишилось в `app-layout.css`. Перенести — означає на восьми
 * layout-ах підняти підвал до низу екрана на коротких сторінках; зараз він стоїть
 * одразу під контентом. Це видима зміна компонування, і вона потребує рішення
 * власника, а не мого. Деталі — у RELEASE_NOTES_1_1_6_286.md.
 * ============================================================================ */

/* v1.1.5.917 — ПРОКРУТКА НЕ СТАВИТЬ ЦІЛЬ ПІД ПАНЕЛІ.
   Браузер сам прокручує до елемента у трьох випадках, і в жодному з них він не знає
   про наші фіксовані панелі: Tab-фокус на полі нижче краю екрана, перехід за #якорем,
   scrollIntoView. Обидва значення читають ті самі змінні, що пише footer.js/header.js,
   плюс safe-area: на телефоні під баром є ще смуга жестів, і вона теж перекриває.
   v1.1.6.286: переїхало з app-layout.css — там воно діяло на 1 layout із 9. */
html {
  scroll-padding-top: calc(var(--kp-header-h, 68px) + var(--n-s-2, 8px));
  scroll-padding-bottom: calc(var(--kp-bottom-nav-h, 0px) + env(safe-area-inset-bottom, 0px) + var(--n-s-3, 16px));
}

/* Базова обгортка.
   v1.1.6.290 (REV46, CANON-STEP-7): `min-height` переїхало сюди з app-layout.css.
   Доти воно діяло на layout «app» — одному з дев'яти, і на решті восьми підвал
   стояв одразу під контентом, а не внизу екрана. Саме до цього тягнулись усі ті
   `flex: 1`, які кожен layout писав у себе і які нічого не робили (body не є
   flex-контейнером). Тепер оболонка поводиться однаково скрізь — це і є «однакові
   елементи по всьому проекту».
   Дві однакові декларації — не помилка: `dvh` перекриває `vh` там, де підтримується,
   і не ламає там, де ні (адресний рядок на мобільному змінює vh, dvh — ні). */
.app-page-wrapper {
  position: relative;
  z-index: var(--kp-z-content);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--kp-header-h, 60px) - var(--kp-footer-h, 80px));
  min-height: calc(100dvh - var(--kp-header-h, 60px) - var(--kp-footer-h, 80px));
}

/* Базовий контейнер. Кожен layout перевизначає max-width/padding у себе — і, як
   пояснено вище, його значення виграє за порядком підключення. */
.container {
  flex: 1;
  width: 100%;
  max-width: var(--n-content-w, 720px);
  margin-inline: auto;
  padding: var(--n-s-5, 20px) var(--n-s-3, 16px);
}

/* v1.1.5.739 — «Поділитися цією сторінкою зі своїм кодом». Лише токени (HB-001);
   без світіння (HB-002). Біле тло під QR — вимога контрасту для сканера.
   v1.1.6.286: переїхало з app-layout.css — три родини маршрутів, де кнопка
   показується, мають власні layout-и й лишались без цих правил. */
.kp-refshare { position: fixed; right: 16px; bottom: 84px; z-index: 60; }
.kp-refshare__fab {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--cell); color: var(--text);
  font-size: var(--kp-text-lg); display: flex; align-items: center; justify-content: center;
}
.kp-refshare__fab:hover { border-color: var(--border-h); background: var(--cell-h); }
.kp-refshare__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kp-refshare__panel {
  position: absolute; right: 0; bottom: 54px; width: 268px; padding: var(--kp-space-3);
  border-radius: var(--kp-radius-lg); border: 1px solid var(--border);
  /* v1.1.6.288: було `var(--bg-2)` — токен, якого НЕ ІСНУЄ (ані в tokens.css, ані
     деінде, ані з рантайму). `var()` без фолбеку на неоголошене — це невалідна
     декларація: браузер викидає її цілком, і панель із QR лишалась БЕЗ ТЛА,
     напівпрозорою над текстом сторінки. Я сам переніс цей рядок у .286, не
     звіривши токени — тому ловлю тут. Правильне ім'я аліаса на ту саму поверхню
     оголошене в tokens.css: --panel (= var(--n-bg-2)). */
  background: var(--panel);
}
.kp-refshare__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kp-space-2); }
.kp-refshare__head strong { font-family: var(--mono); font-size: var(--kp-text-sm); color: var(--text); }
.kp-refshare__close { background: none; border: 0; color: var(--text-2); font-size: var(--kp-text-lg); cursor: pointer; }
.kp-refshare__hint { font-size: var(--kp-text-xs); color: var(--text-2); margin: 6px 0 10px; }
.kp-refshare__qr {
  display: flex; justify-content: center; min-height: 180px; background: #fff;
  border-radius: var(--kp-radius-lg); padding: 6px; border: 1px solid var(--border);
}
.kp-refshare__row { display: flex; gap: 6px; margin-top: 10px; }
.kp-refshare__url {
  flex: 1; min-width: 0; font-size: var(--kp-text-xs); padding: 6px var(--kp-space-2); border-radius: var(--kp-radius-md);
  border: 1px solid var(--border); background: var(--cell); color: var(--text);
}
.kp-refshare__copy {
  padding: 6px 10px; border-radius: var(--kp-radius-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--cell); color: var(--text); font-size: var(--kp-text-xs);
}
.kp-refshare__dl { display: inline-block; margin-top: var(--kp-space-2); font-size: var(--kp-text-xs); color: var(--text-2); }
@media (max-width: 480px) { .kp-refshare { right: 12px; bottom: 76px; } }