/* Оболонка нової теми.
 *
 * DD-02: словник тільки `--kp-*`. Ані `--n-*`, ані голих `--accent`/`--text`,
 * ані постійних аліасів на кшталт `--n-accent: var(--kp-accent)` — інакше
 * легасі-словник протече в чистий пакет.
 *
 * Жодних запасних значень у `var()`: `var(--x, 720px)` ховає відсутність
 * токена й переживає його видалення. У легасі це вже кусало — футер мав
 * `var(--n-content-w, 1200px)` для токена, оголошеного як 720px. Замкненість
 * словника стереже `bin/probe_token_closure.php`.
 *
 * DD-03: жодного сирого px у ширинах. Ширина приходить атрибутом
 * `data-kp-width`, який виставив реєстр презентації; сітка — `data-kp-grid`.
 * Сторінка не може попросити довільну ширину: мінімум задає сітка.
 */

.kp-frame {
  margin: 0;
  min-height: 100dvh;
  background: var(--kp-color-page);
  color: var(--kp-color-text);
  font-family: var(--kp-font-body);
}

/* ── Ширина вмісту ─────────────────────────────────────────────────────── */
/*
 * 🔴 v1.1.6.169: ОДНЕ оголошення на елемент.
 *
 * Розкладка тіла жила у двох блоках — ширина в одному, сітка в іншому, — і
 * діяла та, що нижче. Поки блоки доповнювали один одного, це виглядало
 * нешкідливо; варто було додати третій (мою «спільну ширину»), і сторінки з
 * різними `data-kp-width` перестали шикуватись по одній лінії.
 *
 * Поля задані тут, а не в кожній сторінці: інакше вміст лягає впритул до країв.
 */
.kp-shell__main {
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--kp-space-gutter);
}

.kp-shell__body {
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--kp-space-gutter);
  display: grid;
  gap: var(--kp-space-gutter);
}

[data-kp-width="content"] .kp-shell__body { max-width: var(--kp-layout-content-max); }
[data-kp-width="wide"]    .kp-shell__body { max-width: var(--kp-layout-wide-max); }
[data-kp-width="xl"]      .kp-shell__body { max-width: var(--kp-layout-xl-max); }
[data-kp-width="full"]    .kp-shell__body { max-width: var(--kp-layout-full-max); }

/* Оболонка ширша за вміст: навігація + вміст + опційна колонка. */
.kp-shell { max-width: var(--kp-layout-shell-max); margin-inline: auto; }

/* ── Сітки ─────────────────────────────────────────────────────────────── */
/* Сітку оголошено разом із шириною вище: два оголошення на один елемент і були
   причиною того, що розкладка залежала від порядку рядків (v1.1.6.169). */

[data-kp-grid="single"] .kp-shell__body {
  grid-template-columns: minmax(0, 1fr);
}
[data-kp-grid="main_rail"] .kp-shell__body {
  grid-template-columns: minmax(0, 2fr) minmax(var(--kp-layout-rail-min), 1fr);
}
[data-kp-grid="sidebar_main"] .kp-shell__body {
  grid-template-columns: var(--kp-layout-sidebar) minmax(0, 1fr);
}
[data-kp-grid="sidebar_main_rail"] .kp-shell__body {
  grid-template-columns: var(--kp-layout-sidebar) minmax(0, 1fr) var(--kp-layout-rail-min);
}

/* ── Хром ──────────────────────────────────────────────────────────────── */
.kp-shell__header,
/*
 * 🔴 v1.1.6.169: підвал ПРИБРАНО з цього переліку — тут задається межа ЗНИЗУ,
 * правильна для смуг НАД вмістом (адмін-панель, гостьова шапка). Підвал стоїть
 * ПІД вмістом, і межа малювалась не з того боку: під ним лінія, а між ним і
 * вмістом — нічого. Око читає це як «підвал ні до чого не приклеєний».
 */
.kp-shell__admin-bar,
.kp-shell__guest-header,
.kp-shell__focus-bar {
  background: var(--kp-color-surface);
  border-block-end: 1px solid var(--kp-color-border);
}

.kp-shell__nav { display: flex; gap: var(--kp-space-gutter); flex-wrap: wrap; }
.kp-shell__nav-link { color: var(--kp-color-text-muted); text-decoration: none; }
.kp-shell__nav-link:hover { color: var(--kp-accent); }

.kp-shell__bottom { display: none; }

/* ── FocusShell: інша геометрія, а не інший модуль ──────────────────────── */
.kp-shell--focus { height: 100dvh; max-width: none; display: flex; flex-direction: column; }
.kp-shell--focus .kp-shell__focus-body { flex: 1; min-height: 0; display: grid; }
.kp-shell--focus .kp-shell__focus-main { overflow: auto; }

/* ── AuthShell ─────────────────────────────────────────────────────────── */
.kp-shell--auth { display: flex; flex-direction: column; min-height: 100dvh; }

/*
 * 🔴 v1.1.6.122 (REV20, APP-SHELL-P1-01): звичайна оболонка теж тримає ВИСОТУ
 * ВІКНА.
 *
 * `kp-shell--auth` це вміла з першого дня, а `kp-shell--app` — ні: на короткій
 * сторінці (заглушка, порожня стрічка) підвал сідав одразу під текстом, і далі
 * йшло півекрана порожнечі. Виглядало як обрізана сторінка.
 *
 * Тіло забирає лишок висоти, тож підвал опиняється внизу вікна — і при цьому
 * НЕ стає липким: на довгій сторінці він так само лишається в кінці документа.
 */
.kp-shell--app { display: flex; flex-direction: column; min-block-size: 100dvh; }
.kp-shell--app .kp-shell__body { flex: 1 0 auto; }
.kp-shell--app .kp-shell__footer { margin-block-start: auto; }
.kp-shell__auth-stage { flex: 1; display: grid; place-items: center; }
.kp-shell__auth-card { width: 100%; max-width: var(--kp-layout-content-max); }

/* ── Мобільне ──────────────────────────────────────────────────────────── */
/*
 * ТРИ РІВНІ, а не два (v1.1.6.111, канонічне прев'ю REV4).
 *
 * Було одне правило на 900px: усе ширше — десктоп, усе вужче — мобільний із
 * нижньою навігацією. Канон розрізняє планшет: на 700-1100px нижня панель
 * з'являлась там, де для неї немає причини, а бічна колонка зникала там, де
 * місце ще є.
 *
 *   > 1180px      десктоп: бічна колонка й рейка на місці;
 *   681 - 1180px  компактний: рейка ховається, бічна лишається, нижньої панелі НЕМАЄ;
 *   <= 680px      мобільний: одна колонка + нижня навігація.
 */
@media (max-width: 1180px) {
  .kp-shell__rail { display: none; }
  .kp-shell__body { grid-template-columns: minmax(0, 1fr); }
  .kp-shell--app .kp-shell__body:has(.kp-shell__sidebar) {
    grid-template-columns: var(--kp-layout-sidebar) minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .kp-shell__body { grid-template-columns: minmax(0, 1fr) !important; }
  .kp-shell__sidebar { display: none; }
  .kp-shell__bottom { display: flex; gap: var(--kp-space-gutter); }
}

/* ── Бренд і структура шапки (v1.1.6.107) ────────────────────────────────
 * Структура взята з прев'ю нової теми, підтвердженого власником: бренд
 * ліворуч, первинна навігація по центру, вторинна праворуч; підвал — рядок
 * копірайту й юридичні посилання.
 *
 * Кольори прев'ю НЕ переносяться: воно демонструє п'ять акцентів, зокрема
 * зелений, а канон має десять і дефолт `clay`. Тут лише токени, тож акцент
 * лишається тим, який обрала людина.
 */
/*
 * 🔴 v1.1.6.172: шапка теж була оголошена ДВІЧІ.
 *
 * Учора я звів підвал і тіло, а шапку критерій не перевіряв — і саме вона дала
 * подвійний відступ на знімках: зовнішнє правило клало `padding: … gutter`, а
 * внутрішня сітка — ще один `padding-inline: gutter`. Вміст шапки виявився
 * вдвічі глибше від краю, ніж підвал, і все з'їхало.
 *
 * Лишилось одне оголошення (нижче): відступ там задається РАЗ.
 */

.kp-shell__header .kp-shell__nav {
    flex: 1 1 auto;
}

.kp-shell__nav--secondary {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/*
 * 🔴 v1.1.6.169: правило підвалу було оголошене ДВІЧІ — тут і нижче. Обидва
 * майже однакові, але друге перебивало перше, і жодне з них не задавало
 * розкладки посилань: групи `footer_primary` і `footer_meta` просто лягали
 * рядками, кожна зі своєї лінії. На знімку власника це «Головна · Спільноти ·
 * Оголошення», під ним «Контакти», під ним «Правила…» — три різні початки.
 *
 * Лишилось одне оголошення (нижче), і в ньому задано, як шикуються групи.
 */

.kp-shell__copy {
    flex: 0 0 auto;
    font-size: var(--kp-text-sm);
    color: var(--kp-color-text-muted);
}

/* ── Оболонка входу: шапка й підвал (v1.1.6.116) ─────────────────────────
 * Структура з канонічного прев'ю: бренд ліворуч у легкій шапці, юридичні
 * посилання рядком у підвалі. Обидва — СТРУКТУРА, тож живуть тут; сам бренд
 * лишається компонентом (`kp-brand` у components.css).
 */
.kp-shell__guest-header {
  display: flex;
  align-items: center;
  gap: var(--kp-space-4);
  padding: var(--kp-space-4) var(--kp-space-gutter);
}

.kp-shell__auth-stage { padding: var(--kp-space-6) var(--kp-space-gutter); }

.kp-shell__legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kp-space-4);
  padding: var(--kp-space-5) var(--kp-space-gutter) var(--kp-space-6);
  font-size: var(--kp-text-sm);
}

/* ── Хром сторінки за каноном REV6.5 (v1.1.6.197) ────────────────────────
 * Замінює блок v1.1.6.120/168: первинна навігація переїхала з шапки в БІЧНУ
 * КОЛОНКУ, шапка тримає «бренд | пошук | дії», підвал став одним тихим рядком.
 * Значення — токени; структурна змінна `--kp-shell-nav-w` живе тут, бо це
 * геометрія оболонки, а не слово словника.
 *
 * 🔴 Попутно закрито живий дефект v1.1.6.168-173: перед медіа-блоком 1180px
 * стояв ВИСЯЧИЙ селектор `.kp-shell__body,` — за правилами відновлення CSS
 * парсер відкидав УВЕСЬ наступний блок, тож вузька сітка шапки не діяла ніде
 * й ніколи. Жоден гейт не червонів: клас оголошений, правило написане —
 * просто недосяжне.
 */
.kp-shell--app { --kp-shell-nav-w: 220px; --kp-shell-header-h: 64px; }

/* Оболонка застосунку повношира: смуги шапки/підвалу тягнуться до країв,
   а ВМІСТ кожної смуги капається на shell-max — як у каноні. */
.kp-shell--app { max-width: none; }

.kp-shell__header {
  position: sticky;
  top: 0;
  z-index: var(--kp-z-sticky);
  min-block-size: var(--kp-shell-header-h);
  display: flex;
  align-items: center;
  /* Канон: підкладка ледь прозора з блюром — вміст під шапкою вгадується, не заважаючи. */
  background: color-mix(in srgb, var(--kp-color-surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: var(--kp-border-width) solid var(--kp-color-border);
  /* Бічних полів тут НЕМАЄ: їх задає внутрішня сітка, інакше вони подвоюються. */
  padding-block: var(--kp-space-2);
}

.kp-shell__header-inner {
  inline-size: min(var(--kp-layout-shell-max), 100%);
  margin-inline: auto;
  /* Поля з урахуванням вирізів екрана (канон): на телефонах із «чубчиком»
     вміст не пірнає під нього. */
  padding-inline: max(var(--kp-space-gutter), env(safe-area-inset-left))
                  max(var(--kp-space-gutter), env(safe-area-inset-right));
  display: grid;
  grid-template-columns: var(--kp-shell-nav-w) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kp-space-4);
}


/* Пошук: поле З ІКОНКОЮ — канонічна форма. */
.kp-shell__search { position: relative; max-inline-size: 560px; }
.kp-shell__search-icon {
  position: absolute;
  inset-inline-start: var(--kp-space-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--kp-color-text-muted);
  pointer-events: none;
}
.kp-shell__search-input {
  inline-size: 100%;
  block-size: 40px;
  padding-inline-start: calc(var(--kp-space-3) + 18px + var(--kp-space-2));
  background: var(--kp-color-surface-raised);
}

.kp-shell__actions {
  display: flex;
  align-items: center;
  gap: var(--kp-space-2);
  /* Позицію задає СІТКА, а не автовідступ (урок v1.1.6.169). */
  justify-self: end;
}

/* Швидка дія шапки: кругла кнопка-іконка з крапкою лічильника (канон). */
.kp-shell__action {
  position: relative;
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--kp-radius-pill);
  color: var(--kp-color-text-muted);
}
.kp-shell__action:hover {
  background: var(--kp-color-surface-raised);
  color: var(--kp-color-text);
}
.kp-shell__action-dot {
  position: absolute;
  inset-inline-end: 2px;
  inset-block-start: 1px;
  min-inline-size: 16px;
  block-size: 16px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--kp-radius-pill);
  background: var(--kp-accent);
  color: var(--kp-on-accent);
  border: 2px solid var(--kp-color-surface);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}


/* ── Рама: бічна навігація + тіло (канон REV6.5) ─────────────────────────
 * Одна сітка на весь застосунок: колонка навігації тієї ж ширини, що перша
 * колонка шапки, — бренд стоїть рівно над меню, і сторінка не «пливе».
 */
.kp-shell__frame {
  inline-size: min(var(--kp-layout-shell-max), 100%);
  margin-inline: auto;
  padding-inline: max(var(--kp-space-gutter), env(safe-area-inset-left))
                  max(var(--kp-space-gutter), env(safe-area-inset-right));
  padding-block-start: var(--kp-space-4);
  display: grid;
  grid-template-columns: var(--kp-shell-nav-w) minmax(0, 1fr);
  gap: var(--kp-space-4);
  align-items: start;
}
.kp-shell--app .kp-shell__frame { flex: 1 0 auto; }

/* Права рейка липне під шапкою і гортається всередині себе (канон REV6.5):
   довгий вміст рейки не тягне сторінку, смуга прокрутки схована — сунеться. */
.kp-shell__rail {
  position: sticky;
  top: calc(var(--kp-shell-header-h) + var(--kp-space-4));
  max-block-size: calc(100dvh - var(--kp-shell-header-h) - var(--kp-space-6));
  overflow: auto;
  scrollbar-width: none;
}
.kp-shell__rail::-webkit-scrollbar { display: none; }

/* Сторінки без хрому не мають і колонки: рама вироджується в один стовпець. */
.kp-shell__frame:not(:has(> .kp-shell__nav-side)) { grid-template-columns: minmax(0, 1fr); }

.kp-shell__nav-side {
  position: sticky;
  top: calc(var(--kp-shell-header-h) + var(--kp-space-4));
  max-block-size: calc(100dvh - var(--kp-shell-header-h) - var(--kp-space-6));
  overflow: auto;
  scrollbar-width: none;
}
.kp-shell__nav-side::-webkit-scrollbar { display: none; }






/* ── Підвал за каноном: один тихий рядок ─────────────────────────────────
 * Копірайт і правові посилання в лінію (зразок — auth-footer прев'ю).
 * Смуга повношира, вміст капається тим самим розрахунком полів.
 */
.kp-shell__footer {
  margin-block-start: var(--kp-space-7);
  padding-block: var(--kp-space-5);
  padding-inline: max(calc((100% - var(--kp-layout-shell-max)) / 2 + var(--kp-space-gutter)), var(--kp-space-gutter));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kp-space-2) var(--kp-space-5);
  font-size: var(--kp-text-sm);
  color: var(--kp-color-text-muted);
  border-block-start: var(--kp-border-width) solid var(--kp-color-border);
  background: var(--kp-color-surface);
}
.kp-shell--app .kp-shell__footer { margin-block-start: auto; padding-block-end: max(var(--kp-space-5), env(safe-area-inset-bottom)); }

.kp-shell__footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-space-4);
}
.kp-shell__footer-link { color: var(--kp-color-text-muted); text-decoration: none; }
.kp-shell__footer-link:hover { color: var(--kp-accent); }

.kp-shell__bottom { display: none; }

/* ── Три рівні (канон REV6.5) ────────────────────────────────────────────
 *   > 1180px      десктоп: колонка 220px, рейка на місці;
 *   1024-1180px   компакт: колонка 205px, рейка ховається;
 *   681-1023px    планшет: КОЛОНКА-ІКОНИ 72px — підписи зникають, гліфи ні;
 *   <= 680px      телефон: колонки немає, навігацію несуть нижня панель і шухляда.
 */
@media (max-width: 1180px) {
  .kp-shell--app { --kp-shell-nav-w: 205px; }
}

@media (max-width: 1023px) {
  .kp-shell--app { --kp-shell-nav-w: 72px; }
}

@media (max-width: 680px) {
  .kp-shell__nav-side { display: none; }
  .kp-shell__frame { grid-template-columns: minmax(0, 1fr); }

  /*
   * ТЕЛЕФОН: ДВА РЯДКИ, а не сітка з трьох колонок — перший «бренд ⟷ дії»,
   * другий — пошук на всю ширину (v1.1.6.172; тепер правило ще й ДОСЯЖНЕ —
   * див. примітку про висячий селектор угорі блоку).
   */
  .kp-shell__header-inner {
    grid-template-columns: 1fr auto;
    row-gap: var(--kp-space-3);
  }
  .kp-shell__search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-inline-size: none;
  }

  .kp-shell__bottom {
    display: flex;
    position: sticky;
    bottom: 0;
    justify-content: space-around;
    gap: var(--kp-space-2);
    padding: var(--kp-space-2) var(--kp-space-gutter);
    padding-block-end: max(var(--kp-space-2), env(safe-area-inset-bottom));
    background: var(--kp-color-surface);
    border-block-start: var(--kp-border-width) solid var(--kp-color-border);
  }
  .kp-shell__footer { padding-block-end: var(--kp-space-7); }
}

/* ── Різновиди оболонки, що лишались без правил (v1.1.6.173) ─────────────
 * Це СТРУКТУРА, тому тут, а не в компонентах: обидва задають геометрію
 * сторінки, а не вигляд елемента.
 */

/* Адмінська оболонка ширша за звичайну: таблиці не читаються у вузькій колонці. */
.kp-shell--admin .kp-shell__body { max-width: var(--kp-layout-full-max); }

/* Бічна колонка зосередженого режиму ховається разом із рештою хрому. */
.kp-shell__focus-sidebar { display: none; }

@media (min-width: 1181px) {
  .kp-shell__focus-sidebar {
    display: block;
    inline-size: var(--kp-layout-sidebar);
  }
}