/* Примітиви дизайн-системи. Друга хвиля.
 *
 * Ті самі правила, що й у першій:
 *   • акцентна заливка ЗАВЖДИ з `--kp-on-accent`;
 *   • жодного зашитого кольору переднього плану;
 *   • жодних сирих радіусів, тіней і тривалостей — усе з `--kp-*`.
 *
 * Тут з'являються накладки (Menu, Tooltip, Popover, Toast), тож шари беруться
 * з `--kp-z-*`: спроба розставити z-index «на око» — найшвидший спосіб дістати
 * модалку під тостом і тост під випадайкою.
 */

/* ── Switch / Checkbox / Radio ─────────────────────────────────────────── */
.kp-check {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-space-2);
  color: var(--kp-color-text);
  font-size: var(--kp-text-sm);
}
.kp-check__box, .kp-check__radio {
  inline-size: var(--kp-space-4);
  block-size: var(--kp-space-4);
  border: 1px solid var(--kp-color-control-border);
  background: var(--kp-color-surface);
}
.kp-check__box { border-radius: var(--kp-radius-xs); }
.kp-check__radio { border-radius: var(--kp-radius-pill); }
.kp-check__box:checked, .kp-check__radio:checked {
  background: var(--kp-accent);
  color: var(--kp-on-accent);
  border-color: transparent;
}
.kp-check input:focus-visible { outline: 2px solid var(--kp-color-focus-ring); outline-offset: 2px; }

.kp-switch {
  position: relative;
  inline-size: var(--kp-space-7);
  block-size: var(--kp-space-4);
  border-radius: var(--kp-radius-pill);
  background: var(--kp-color-surface-muted);
  border: 1px solid var(--kp-color-border);
  transition: background var(--kp-motion-fast) var(--kp-ease-standard);
}
.kp-switch[aria-checked="true"] { background: var(--kp-accent); color: var(--kp-on-accent); border-color: transparent; }
.kp-switch__thumb {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 1px;
  inline-size: var(--kp-space-3);
  block-size: var(--kp-space-3);
  border-radius: var(--kp-radius-pill);
  background: var(--kp-color-surface);
  transition: inset-inline-start var(--kp-motion-fast) var(--kp-ease-standard);
}

/* ── Avatar ───────────────────────────────────────────────────────────── */
.kp-avatar {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  inline-size: var(--kp-space-6);
  block-size: var(--kp-space-6);
  border-radius: var(--kp-radius-pill);
  background: var(--kp-color-surface-muted);
  color: var(--kp-color-text-muted);
  font-size: var(--kp-text-sm);
}
.kp-avatar--sm { inline-size: var(--kp-space-5); block-size: var(--kp-space-5); }
.kp-avatar--lg { inline-size: var(--kp-space-8); block-size: var(--kp-space-8); }
.kp-avatar--accent { background: var(--kp-accent); color: var(--kp-on-accent); }

/* ── Menu / Dropdown ──────────────────────────────────────────────────── */
.kp-menu {
  z-index: var(--kp-z-dropdown);
  min-inline-size: var(--kp-space-8);
  padding: var(--kp-space-1);
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface-raised);
  box-shadow: var(--kp-shadow-md);
}
.kp-menu__item {
  display: block;
  inline-size: 100%;
  padding: var(--kp-space-2) var(--kp-space-3);
  border: 0;
  border-radius: var(--kp-radius-sm);
  background: transparent;
  color: var(--kp-color-text);
  text-align: start;
  cursor: pointer;
}
.kp-menu__item:hover { background: var(--kp-color-surface-muted); }
.kp-menu__item[aria-current="true"] { background: var(--kp-accent); color: var(--kp-on-accent); }
.kp-menu__separator { block-size: 1px; margin: var(--kp-space-1) 0; background: var(--kp-color-border); }

/* ── Tooltip / Popover ────────────────────────────────────────────────── */
.kp-tooltip {
  z-index: var(--kp-z-dropdown);
  padding: var(--kp-space-1) var(--kp-space-2);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-color-text);
  color: var(--kp-color-page);
  font-size: var(--kp-text-xs);
  box-shadow: var(--kp-shadow-sm);
}
.kp-popover {
  z-index: var(--kp-z-dropdown);
  max-inline-size: var(--kp-layout-content-max);
  padding: var(--kp-space-4);
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  background: var(--kp-color-surface-raised);
  box-shadow: var(--kp-shadow-lg);
}

/* ── Toast / Notice ───────────────────────────────────────────────────── */
.kp-toast {
  display: flex;
  align-items: center;
  gap: var(--kp-space-3);
  padding: var(--kp-space-3) var(--kp-space-4);
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface-raised);
  color: var(--kp-color-text);
  box-shadow: var(--kp-shadow-lg);
}
.kp-toast--success { background: var(--kp-color-success); color: var(--kp-color-on-success); }
.kp-toast--warning { background: var(--kp-color-warning); color: var(--kp-color-on-warning); }
.kp-toast--danger  { background: var(--kp-color-danger);  color: var(--kp-color-on-danger); }
.kp-toast--info    { background: var(--kp-color-info);    color: var(--kp-color-on-info); }

.kp-notice {
  padding: var(--kp-space-3) var(--kp-space-4);
  border: 1px solid var(--kp-color-border);
  border-inline-start-width: var(--kp-space-1);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-color-surface-muted);
  color: var(--kp-color-text);
}
/* Семантичні варіанти примітива (v1.1.6.112): межу фарбує роль, не компонент. */
.kp-notice--warning { border-inline-start-color: var(--kp-color-warning); background: var(--kp-color-warning-bg); }
.kp-notice--danger  { border-inline-start-color: var(--kp-color-danger); }
.kp-notice--success { border-inline-start-color: var(--kp-color-success); }

/* ── Progress ─────────────────────────────────────────────────────────── */
.kp-progress {
  block-size: var(--kp-space-2);
  border-radius: var(--kp-radius-pill);
  background: var(--kp-color-surface-muted);
  overflow: hidden;
}
.kp-progress__bar {
  block-size: 100%;
  background: var(--kp-accent);
  color: var(--kp-on-accent);
  transition: inline-size var(--kp-motion-normal) var(--kp-ease-standard);
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.kp-skeleton {
  border-radius: var(--kp-radius-sm);
  background: var(--kp-color-surface-muted);
  animation: kp-skeleton-pulse var(--kp-motion-slow) var(--kp-ease-standard) infinite alternate;
}
@keyframes kp-skeleton-pulse { from { opacity: 0.6; } to { opacity: 1; } }
.kp-skeleton--text { block-size: var(--kp-space-4); }
.kp-skeleton--title { block-size: var(--kp-space-5); }

/* ── EmptyState / ErrorState ──────────────────────────────────────────── */
.kp-state {
  display: grid;
  justify-items: center;
  gap: var(--kp-space-3);
  padding: var(--kp-space-7) var(--kp-space-4);
  text-align: center;
  color: var(--kp-color-text-muted);
}
.kp-state__title {
  font: var(--kp-weight-bold) var(--kp-text-lg) / var(--kp-leading-tight) var(--kp-font-display);
  color: var(--kp-color-text);
}
.kp-state__text { max-inline-size: 46ch; }
.kp-state__detail { font-size: var(--kp-text-sm); opacity: 0.75; }
.kp-state .kp-stack { inline-size: min(100%, 28rem); }

/*
 * Вид стану міняє ЗНАЧЕННЯ, а не структуру (v1.1.6.110, лабораторія станів
 * канонічного прев'ю). Помилка й відмова говорять кольором небезпеки; закритий
 * вміст і модерація — попередженням на власному фоні; тимчасові стани лишаються
 * нейтральними, бо нічого поганого не сталося.
 */
.kp-state--error .kp-state__title,
.kp-state--denied .kp-state__title { color: var(--kp-color-danger); }

.kp-state--private,
.kp-state--join_required,
.kp-state--moderation {
  background: var(--kp-color-warning-bg);
  border-radius: var(--kp-radius-lg);
}

.kp-state--private .kp-state__title,
.kp-state--join_required .kp-state__title,
.kp-state--moderation .kp-state__title { color: var(--kp-color-warning); }

/* ── Layout-примітиви ─────────────────────────────────────────────────── */
.kp-stack { display: flex; flex-direction: column; gap: var(--kp-space-4); }
.kp-stack--tight { gap: var(--kp-space-2); }
.kp-stack--loose { gap: var(--kp-space-6); }

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

.kp-divider { block-size: 1px; background: var(--kp-color-border); border: 0; }

/*
 * 🔴 v1.1.6.117 (REV18, AUTH-DIVIDER-P1-01): модифікатор мусить стояти ПІСЛЯ
 * примітива й у ТОМУ САМОМУ файлі.
 *
 * Він жив у `components.css`, який вантажиться РАНІШЕ за цей файл. Специфічність
 * однакова, отже вигравав пізніший `.kp-divider` — і геометрія напису мовчки
 * поверталась до лінії 1px. На знімку це не було видно, бо flex-діти все одно
 * малювались; тобто вада виглядала полагодженою.
 *
 * Виправлено порядком, не `!important`: перебивання силою ховає причину й
 * зробило б наступний конфлікт невидимим.
 */
.kp-divider--label {
  display: flex;
  align-items: center;
  gap: var(--kp-space-3);
  block-size: auto;
  background: none;
  margin-block: var(--kp-space-5);
  font-size: var(--kp-text-sm);
  color: var(--kp-color-text-muted);
}
.kp-divider--label::before,
.kp-divider--label::after {
  content: "";
  flex: 1;
  block-size: var(--kp-border-width);
  background: var(--kp-color-border);
}


.kp-container { margin-inline: auto; inline-size: 100%; }
.kp-container--content { max-inline-size: var(--kp-layout-content-max); }
.kp-container--wide    { max-inline-size: var(--kp-layout-wide-max); }
.kp-container--xl      { max-inline-size: var(--kp-layout-xl-max); }
.kp-container--full    { max-inline-size: var(--kp-layout-full-max); }

/* ── Компоненти оболонки ──────────────────────────────────────────────── */
.kp-topbar {
  z-index: var(--kp-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--kp-space-4);
  padding: var(--kp-space-3) var(--kp-space-4);
  background: var(--kp-color-surface);
  border-block-end: 1px solid var(--kp-color-border);
}
.kp-topbar__brand {
  font: var(--kp-weight-bold) var(--kp-text-lg) / var(--kp-leading-tight) var(--kp-font-display);
  color: var(--kp-color-text);
  text-decoration: none;
}

.kp-user-strip { display: flex; align-items: center; gap: var(--kp-space-3); }
.kp-user-strip__metric {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-space-1);
  font-size: var(--kp-text-sm);
  color: var(--kp-color-text-muted);
}

.kp-mobile-nav {
  z-index: var(--kp-z-sticky);
  display: flex;
  justify-content: space-around;
  padding: var(--kp-space-2) 0;
  padding-block-end: max(var(--kp-space-2), env(safe-area-inset-bottom));
  background: var(--kp-color-surface);
  border-block-start: 1px solid var(--kp-color-border);
}
.kp-mobile-nav__link {
  display: grid;
  justify-items: center;
  gap: var(--kp-space-1);
  font-size: var(--kp-text-xs);
  color: var(--kp-color-text-muted);
  text-decoration: none;
}
.kp-mobile-nav__link[aria-current="page"] { color: var(--kp-accent); }

/* ── Вкладки (v1.1.6.113) ────────────────────────────────────────────────
 * Потрібні канонічним прев'ю для пари «Вхід / Реєстрація». У нас вкладка —
 * ПОСИЛАННЯ, бо це два маршрути: JS-перемикач ховав би форму, губив `next`
 * і ламав кнопку «назад».
 */
.kp-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-block-end: var(--kp-border-width) solid var(--kp-color-border);
  margin-block-end: var(--kp-space-4);
}
.kp-tabs__item {
  padding: var(--kp-space-3) var(--kp-space-2);
  text-align: center;
  text-decoration: none;
  font-weight: var(--kp-weight-bold);
  color: var(--kp-color-text-muted);
  border-block-end: var(--kp-space-1) solid transparent;
  margin-block-end: calc(-1 * var(--kp-border-width));
}
.kp-tabs__item--active {
  color: var(--kp-accent);
  border-block-end-color: var(--kp-accent);
}

/* ── Меню й шухляда на `details` (v1.1.6.120) ────────────────────────────
 * Обидва відкриваються БЕЗ скриптів: `details` дає стан, доступність із
 * клавіатури й закриття по Esc від самого браузера. Це не спрощення, а
 * рішення: проєкт уже двічі платив за інтерактив, що зникає без JS.
 */
.kp-menu__summary,
.kp-drawer__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-space-2);
  min-block-size: var(--kp-control-height-md);
  padding: 0 var(--kp-space-3);
  border-radius: var(--kp-radius-pill);
  cursor: pointer;
  list-style: none;
}
.kp-menu__summary::-webkit-details-marker,
.kp-drawer__summary::-webkit-details-marker { display: none; }

.kp-menu, .kp-drawer { position: relative; }

.kp-menu__panel,
.kp-drawer__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--kp-space-2));
  z-index: var(--kp-z-dropdown);
  display: grid;
  gap: var(--kp-space-1);
  min-inline-size: 12rem;
  padding: var(--kp-space-2);
  background: var(--kp-color-surface-raised);
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  box-shadow: var(--kp-shadow-lg);
}

.kp-menu__item,
.kp-drawer__item {
  padding: var(--kp-space-2) var(--kp-space-3);
  border-radius: var(--kp-radius-sm);
  text-decoration: none;
  color: var(--kp-color-text);
}
.kp-menu__item:hover,
.kp-drawer__item:hover { background: var(--kp-accent-soft); }
.kp-menu__item--strong { font-weight: var(--kp-weight-bold); color: var(--kp-accent); }

.kp-shell__bottom-link {
  display: grid;
  place-items: center;
  padding: var(--kp-space-1) var(--kp-space-2);
  font-size: var(--kp-text-sm);
  text-decoration: none;
  color: var(--kp-color-text-muted);
}

/*
 * Видимість шухляди — властивість САМОГО компонента, тож живе тут, а не в
 * `shell.css`. `T0-10.7` спіймав це втретє за чотири релізи: щоразу я кладу
 * компонент в оболонку, бо там уже стоїть сусіднє медіа-правило. Ознака та
 * сама: якщо селектор починається з імені компонента — файл обрано неправильно.
 */
/*
 * 🔴 v1.1.6.123 (REV22, APP-CHROME-RESPONSIVE-P0-03): «взаємовиключні» було
 * ЗАЯВОЮ, а не правилом.
 *
 * Я написав `max-width: 1180` для шухляди й `max-width: 680` для нижньої
 * панелі — тобто на телефоні працювали ОБИДВА меню одночасно. Рівно те, що
 * канонічне прев'ю лікувало в себе (REV5.1) і що я переказав у патч-нотах як
 * зроблене.
 *
 * Тепер діапазон шухляди має ОБИДВІ межі: 681-1180.
 */
@media (max-width: 680px) { .kp-drawer { display: inline-block; } } /* v1.1.6.197: шухляда — телефонна; ширше за 680 навігацію несе бічна колонка. */
@media (min-width: 681px) { .kp-drawer { display: none; } }

/* ── Перемикач вигляду (v1.1.6.134) ──────────────────────────────────────
 * Зразок акценту фарбується САМ СОБОЮ: `data-kp-accent` на кнопці вмикає той
 * самий блок змінних, що й на документі, тож жодного кольору тут не зашито —
 * додається одинадцятий акцент у каталозі, і зразок з'являється без правок CSS.
 */
.kp-appearance__label {
  margin: var(--kp-space-2) 0 var(--kp-space-1);
  font-size: var(--kp-text-sm);
  color: var(--kp-color-text-muted);
}

.kp-appearance__swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--kp-space-2);
}

.kp-swatch {
  inline-size: var(--kp-space-6);
  block-size: var(--kp-space-6);
  padding: 0;
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-pill);
  background: var(--kp-accent);
  /* Контракт акценту: заливка акцентом ЗАВЖДИ оголошує свій текст, навіть коли
     зараз тексту немає — інакше перший же символ у ній стане нечитним. */
  color: var(--kp-on-accent);
  cursor: pointer;
}

.kp-swatch--active {
  outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring);
  outline-offset: var(--kp-focus-ring-offset);
}

/* Секція мов у меню керування (v1.1.6.135) — як третя секція старої шапки. */
.kp-appearance__languages { display: grid; gap: var(--kp-space-1); }
.kp-appearance__languages .kp-menu__item { inline-size: 100%; text-align: start; }

/* ── Небезпечна картка й розкривний блок (v1.1.6.139) ────────────────────
 * Зона незворотних дій має виглядати інакше ще до того, як людина прочитає
 * заголовок: межа кольором небезпеки — це не оздоблення, а попередження.
 */
.kp-card--danger { border-color: var(--kp-color-danger); }

.kp-details__summary {
  cursor: pointer;
  padding: var(--kp-space-2) 0;
  font-weight: var(--kp-weight-medium);
  color: var(--kp-color-danger);
}
.kp-details[open] .kp-details__summary { margin-block-end: var(--kp-space-3); }

/* ── Рядок налаштування (v1.1.6.153, канонічне прев'ю REV6) ──────────────
 * Підпис і пояснення ліворуч, керування праворуч, роздільник між рядками.
 * Пояснення — частина рядка, а не підказка при наведенні: людина мусить
 * розуміти, що вмикає, ДО того, як увімкне.
 */
.kp-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kp-space-4);
  padding-block: var(--kp-space-3);
  border-block-start: var(--kp-border-width) solid var(--kp-color-border);
}
.kp-setting-row:first-of-type { border-block-start: 0; }

.kp-setting-row__copy strong { display: block; }
.kp-setting-row__copy span {
  font-size: var(--kp-text-sm);
  color: var(--kp-color-text-muted);
}

/* ── Підпис бренду й прихована мітка (v1.1.6.168) ────────────────────────
 * 🔴 Обидва приїхали сюди з `shell.css`, де їх спіймав T0-10.7 — учетверте за
 * серію. Ознака та сама й підтверджена вкотре: селектор, що починається з імені
 * компонента, належить компонентам, навіть якщо вживається лише в оболонці.
 */
/* Підпис бренду з канону: назва плюс рядок призначення. */
/*
 * 🔴 v1.1.6.173: обгортка бренду не мала стилю ЗОВСІМ.
 *
 * Я малюю `kp-brand__lockup` у розмітці з 1.1.6.168, але правила для неї не
 * написав — і звіт перенесення CSS показав це першим рядком: «зіставлено, але
 * ще немає». Без сітки назва й підпис розсувались за типовим міжрядковим
 * інтервалом, і бренд на телефоні займав три рядки.
 *
 * Канон: `display:grid; line-height:1.05` — назва й підпис як одне ціле.
 */
.kp-brand__lockup {
  display: grid;
  line-height: 1.05;
}

.kp-brand__subtitle {
  display: block;
  font-size: var(--kp-text-xs);
  font-weight: var(--kp-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kp-color-text-muted);
  /*
   * 🔴 v1.1.6.172: підпис НЕ переноситься.
   *
   * «СОЦІАЛЬНА ПЛАТФОРМА» на телефоні лягало у два рядки й розсовувало шапку
   * вдвічі — бренд починав займати половину екрана. Підпис пояснює продукт
   * новачкові; він не вартий того, щоб з'їдати місце в кожного.
   */
  white-space: nowrap;
}

@media (max-width: 480px) {
  /*
   * На найвужчих екранах підпис ховається зовсім: там і без нього тісно, а
   * назва бренду каже достатньо.
   */
  .kp-brand__subtitle { display: none; }
}

/* Підпис лише для читачів екрана — потрібен полю пошуку без видимої мітки. */
.kp-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ── Навігація зон акаунта (v1.1.6.172, канон `subpage-nav`) ─────────────
 * 🔴 Стилю не було зовсім: дев'ять посилань текли суцільним підкресленим
 * рядком, і людина не могла ані порахувати їх, ані влучити пальцем. На знімку
 * власника це виглядало як абзац тексту, а не як навігація.
 *
 * Канон робить із них пігулки: кожен пункт — окрема ціль із власною межею.
 */
.kp-account__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
  margin-block-end: var(--kp-space-4);
}

.kp-account__nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-space-2);
  padding: var(--kp-space-2) var(--kp-space-3);
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-pill);
  text-decoration: none;
  color: var(--kp-color-text);
  /* Палець — не курсор: ціль мусить бути не меншою за подушечку. */
  min-block-size: var(--kp-tap-min);
}

.kp-account__nav a:hover { border-color: var(--kp-accent); }

.kp-account__nav a[aria-current="page"] {
  background: var(--kp-accent-soft);
  border-color: transparent;
  color: var(--kp-accent);
}

/* ── Класи, що малювались без правил (v1.1.6.173) ────────────────────────
 * 🔴 Усі п'ять знайшов критерій CHR-12, а не око: клас без стилю не ламає
 * сторінку — вона просто виглядає «не так», тому такі й живуть довго.
 */

/* Підпис у меню глядача: ім'я поруч з аватаром, не окремим блоком. */
.kp-menu__label {
  font-weight: var(--kp-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 12ch;
}

/* Меню глядача притиснуте до правого краю — воно останнє в шапці. */
.kp-menu--user .kp-menu__panel {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

/* Повернення у зосередженому режимі: ціль розміром із палець, як решта. */
.kp-shell__back {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--kp-tap-min);
  min-block-size: var(--kp-tap-min);
  text-decoration: none;
  color: var(--kp-color-text);
}
.kp-shell__back:hover { color: var(--kp-accent); }

/* ── Головна для гостя (v1.1.6.176) ──────────────────────────────────────
 * Показники в ряд, оголошення сіткою. Обидва блоки зникають разом зі своїми
 * даними — порожня секція на першій сторінці гірша за її відсутність.
 */
.kp-landing__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--kp-space-4);
  margin: 0;
}

.kp-landing__figure dt {
  font-size: var(--kp-text-sm);
  color: var(--kp-color-text-muted);
}
.kp-landing__figure dd {
  margin: 0;
  font-size: var(--kp-text-xl);
  font-weight: var(--kp-weight-bold);
}

.kp-landing__post + .kp-landing__post {
  margin-block-start: var(--kp-space-3);
  padding-block-start: var(--kp-space-3);
  border-block-start: var(--kp-border-width) solid var(--kp-color-border);
}

.kp-landing__listings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--kp-space-3);
}

.kp-card--flat { box-shadow: var(--kp-shadow-none); }

/* Сітка каталогу оголошень (v1.1.6.177). */
.kp-listings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--kp-space-4);
}

/* ── Хром REV6.5: компонентні правила (v1.1.6.197) ───────────────────────
 * Структура (сітки, ширини, липкість) лишається в shell.css; тут — вигляд
 * КОМПОНЕНТІВ хрому: іконка, пункт бічної навігації, лічильник, аватар.
 * Межа T0-10.7: shell/frame-CSS тримає лише структурні селектори.
 */
/* Іконка спрайта: контур перефарбовується станом елемента (currentColor). */
.kp-icon {
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kp-avatar__img {
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.kp-nav-list { display: grid; gap: var(--kp-space-1); }

.kp-nav__section-label {
  margin: var(--kp-space-4) var(--kp-space-3) var(--kp-space-2);
  color: color-mix(in srgb, var(--kp-color-text-muted) 72%, transparent);
  font-size: var(--kp-text-xs);
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kp-nav__section-label:first-child { margin-block-start: 0; }

.kp-nav__item {
  display: flex;
  align-items: center;
  gap: var(--kp-space-3);
  padding: var(--kp-space-2) var(--kp-space-3);
  border-radius: var(--kp-radius-md);
  color: var(--kp-color-text-muted);
  font-weight: 680;
  text-decoration: none;
}
.kp-nav__item:hover {
  background: var(--kp-color-surface-raised);
  color: var(--kp-color-text);
}
.kp-nav__item.is-active {
  background: var(--kp-accent-soft);
  color: var(--kp-accent);
}

.kp-nav__label { min-inline-size: 0; }

.kp-nav__count {
  margin-inline-start: auto;
  min-inline-size: 21px;
  block-size: 21px;
  padding-inline: 6px;
  display: grid;
  place-items: center;
  border-radius: var(--kp-radius-pill);
  background: var(--kp-accent);
  color: var(--kp-on-accent);
  font-size: var(--kp-text-xs);
}

@media (max-width: 1023px) {
  .kp-nav__label,
  .kp-nav__section-label { display: none; }
  .kp-nav__item { justify-content: center; padding-inline: var(--kp-space-2); }
  .kp-nav__count {
    position: absolute;
    margin: 0;
    inset-inline-end: var(--kp-space-1);
    inset-block-start: var(--kp-space-1);
    min-inline-size: 16px;
    block-size: 16px;
    font-size: 9px;
  }
  .kp-nav__item { position: relative; }
}

@media (max-width: 680px) {
  /* Канон ховає підзаголовок бренду на телефоні: рядок один, головне — назва. */
  .kp-brand__subtitle { display: none; }
}


/* ── Слайдери за каноном REV6.5 (v1.1.6.198) ─────────────────────────────
 * «Слайдер» нової теми — це НЕ карусель на скриптах, а горизонтальний ряд зі
 * scroll-snap: довгий ряд вкладок/розділів СУНЕТЬСЯ пальцем чи колесом і сам
 * стає на найближчий пункт. Працює з вимкненим JS, доступний з клавіатури
 * (звичайний скрол-контейнер), не ламає кнопку «назад».
 *
 * СПОСІБ, А НЕ КОПІЯ (урок v1.1.6.173): механіка оголошена ОДИН раз списком
 * селекторів. Новий ряд, якому треба сунутись, додається сюди рядком — а не
 * власною копією п'яти властивостей, які потім розійдуться.
 *
 * ЧОМУ `proximity`, не `mandatory`: обов'язковий снап бореться з людиною за
 * кожен піксель і смикає ряд, коли вона зупинилась між пунктами навмисно.
 */
.kp-account__nav,
.kp-arena__nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kp-account__nav::-webkit-scrollbar,
.kp-arena__nav::-webkit-scrollbar { display: none; }

/* Пункт не стискається і не рветься на два рядки — інакше «слайд» вироджується
   у звичайний перенос, і ряд знову займає пів екрана заввишки. */
.kp-account__nav > *,
.kp-arena__nav > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}