/* Сторінка статті бази знань. Каркас (три колонки, навігація, сайдбарні
   віджети) приходить із kb-category.css — стаття це та сама сторінка плюс TOC.
   Тут лише заголовок, типографіка тіла і сам TOC.

   Окремого екрана статті в макеті немає: розміри взяті з токенів макета
   (title/big-24-bold, body/big-16-*, heading/h1) і з типографіки блогу. */

.kb-article-single__title {
  margin: 0 0 var(--kb-gap-large);
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
  color: var(--kb-text);
}

@media screen and (max-width: 767px) {
  .kb-article-single__title { font-size: 28px; line-height: 32px; }
}

/* --- Тіло статті ---
   Селектори всередині .kb-prose навмисно за тегами: контент приходить із
   редактора, класів у ньому немає. */

.kb-prose {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--kb-text-muted);
}

.kb-prose > *:first-child { margin-top: 0; }
.kb-prose > *:last-child { margin-bottom: 0; }

.kb-prose h2 {
  margin: 32px 0 var(--kb-gap);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--kb-text);
}

.kb-prose h3 {
  margin: var(--kb-gap-large) 0 8px;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--kb-text);
}

.kb-prose p { margin: 0 0 var(--kb-gap); }

/* [role="link"] — те саме посилання, але <span>: у панель і клієнтську зону
   тег <a> заборонений (godlike_kb_gate_content_links()). Виглядати й
   підкреслюватись воно мусить так само, інакше в тексті статті зʼявився б
   «мертвий» на вигляд фрагмент. */
.kb-prose a,
.kb-prose [role="link"] { color: var(--kb-accent); text-decoration: underline; }
.kb-prose [role="link"] { cursor: pointer; }
.kb-prose a:hover,
.kb-prose [role="link"]:hover { text-decoration: none; color: var(--kb-accent); }

.kb-prose strong { color: var(--kb-text); font-weight: 700; }

.kb-prose ul,
.kb-prose ol { margin: 0 0 var(--kb-gap); padding-left: 20px; }
.kb-prose li { margin-bottom: 4px; }

.kb-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--kb-gap-large) 0;
  border-radius: var(--kb-radius-inner);
}

.kb-prose blockquote {
  margin: var(--kb-gap-large) 0;
  padding: var(--kb-gap) var(--kb-pad-card);
  border-left: 2px solid var(--kb-accent);
  border-radius: var(--kb-radius-inner);
  background: var(--kb-surface-50);
}

/* --- Блоки-попередження в тілі статті (admonition) ---
   620 із 745 статей прода мають <blockquote class="admonition admonition-*">, а
   ВСІ 28 правил цього компонента в темі скоупнуті на .blog-page__content
   (css/new/style.scss) — тобто в базі знань не діяло жодне: блок виглядав як
   звичайна цитата, без свого кольору, іконки й заголовка.

   Гірше того, глобальний blockquote:before малює декоративні лапки 92x64 з
   top: -40px, а скасування цих лапок теж лежить під .blog-page__content — тож
   у КБ вони наїжджали на слово CAUTION у шапці блока. Саме це й видно було на
   скріншоті постановника.

   Додавати .blog-page__content на .kb-prose не можна: під тим селектором
   висить уся блогова типографіка, вона перебила б розділ. Тому правила
   продубльовані тут, а розміри взяті НАШІ (16px/24px із .kb-prose), не
   блогові 18px/205%. Кольори варіантів і data-URI іконок — ті самі, що в
   блозі: це один і той самий компонент для читача. */
.kb-prose blockquote::before { content: none; }

.kb-prose .admonition {
  display: block;
  margin: var(--kb-gap-large) 0;
  padding: var(--kb-gap);
  border-left: 5px solid;
  border-radius: var(--kb-radius-inner);
  color: var(--kb-text);
}

.kb-prose .admonition .admonition-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.kb-prose .admonition .admonition-title p {
  margin: 0;
  line-height: 100%;
  text-transform: uppercase;
}

.kb-prose .admonition p { margin: 0; }

.kb-prose .admonition .admonition-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-right: 0.4em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Кольори варіантів — з блогової версії компонента. note окремого кольору
   рамки не має: у блозі там лишається дефолтний currentColor. */
.kb-prose .admonition.admonition-note { background-color: #474748; }
.kb-prose .admonition.admonition-tip { background-color: #003100; border-left-color: #009400; }
.kb-prose .admonition.admonition-important { background-color: #193c47; border-left-color: #4cb3d4; }
.kb-prose .admonition.admonition-caution { background-color: #4d3800; border-left-color: #e6a700; }
.kb-prose .admonition.admonition-warning { background-color: #4b1113; border-left-color: #e13238; }

.kb-prose .admonition.admonition-note .admonition-icon,
.kb-prose .admonition.admonition-important .admonition-icon {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z'%3E%3C/path%3E%3C/svg%3E")
}

.kb-prose .admonition.admonition-tip .admonition-icon {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z'%3E%3C/path%3E%3C/svg%3E")
}

.kb-prose .admonition.admonition-caution .admonition-icon {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z'%3E%3C/path%3E%3C/svg%3E")
}

.kb-prose .admonition.admonition-warning .admonition-icon {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z'%3E%3C/path%3E%3C/svg%3E")
}

.kb-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--kb-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--kb-text);
}

.kb-prose pre {
  margin: var(--kb-gap-large) 0;
  padding: var(--kb-pad-card-mob);
  border-radius: var(--kb-radius-inner);
  background: var(--kb-surface);
  /* Довгий код скролиться У СВОЄМУ контейнері, сторінка по горизонталі не їде. */
  overflow-x: auto;
}

.kb-prose pre code { padding: 0; background: none; }

/* Скролпорт для широкої таблиці — ОБГОРТКА, а не сама <table>.
   Раніше тут стояв display: block на <table>, і це знімало з елемента роль
   таблиці (табличний бокс ставав анонімним, скрінрідер більше не озвучував
   рядки й колонки), а прокручуваний блок без tabindex ще й недосяжний із
   клавіатури. Обгортку додає godlike_kb_wrap_tables() у hkb-single.php: div із
   tabindex="0" і role="region". Без скролпорту таблиця на 12 колонок = 892px у
   колонці 608px виїжджала на сайдбар і обрізалась
   .site-wrapper { overflow: hidden } без жодного скролбара (заміряно; на проді
   52 опублікованих статті з <table>). */
.kb-prose__scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--kb-gap-large) 0;
}

/* Видимий фокус — обов'язковий: елемент отримав tabindex, отже потрапляє в
   Tab-обхід, і користувач мусить бачити, де він. */
.kb-prose__scroll:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: 2px;
}

.kb-prose table {
  /* width: 100% свідомо НЕ ставимо: вузьку таблицю тягло б на всю колонку.
     Обмежує саме max-width. */
  max-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Таблиця поза обгорткою (стара стаття в кеші, чужий рендер) не мусить лишитись
   без скролу зовсім, тож тут запасний варіант із тією самою ціною, що була. */
.kb-prose > table {
  display: block;
  overflow-x: auto;
  margin: var(--kb-gap-large) 0;
}

.kb-prose th,
.kb-prose td {
  padding: 8px var(--kb-gap);
  border: 1px solid var(--kb-hairline);
  text-align: left;
}

.kb-prose th { color: var(--kb-text); font-weight: 600; }

/* --- TOC --- */

.kb-toc { padding: 16px; }

/* Кнопка існує завжди (щоб не міняти DOM з JS), але на широких екранах вона —
   просто заголовок: ні курсора, ні шеврона. */
.kb-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kb-text);
  font-family: inherit;
  text-align: left;
  cursor: default;
}

.kb-toc__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
}

.kb-toc__chevron { display: none; }

.kb-toc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.kb-toc__item--h3 { padding-left: var(--kb-gap); }

.kb-toc__link {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--kb-text-muted);
  text-decoration: none;
}

.kb-toc__link:hover,
.kb-toc__link:focus-visible { color: var(--kb-accent); }

/* СТИКІ САЙДБАРА ТУТ НЕМАЄ, І ЦЕ НЕ ЗАБУТО.
   position: sticky на .kb-cols__aside фізично не працює на цих сторінках:
   зовнішній контейнер сторінки — .site-wrapper з overflow: hidden
   (css/new/style.scss:954). Для sticky-елемента найближчий скролпорт стає саме
   цей контейнер, а він не скролиться, тож прилипання ніколи не спрацьовує.

   Заміряно в браузері, а не виведено зі спеки: при overflow: hidden сайдбар
   від'їжджає на всі 900px прокрутки (top 169 -> -731); з тимчасово виставленим
   overflow: visible він зупиняється на 24px і зсувається лише на 145px.

   Прибрати overflow: hidden з .site-wrapper заради sticky не можна: саме він
   гасить горизонтальне переповнення від .site-header__panels-items__wrapper —
   випадного меню панелей, яке завжди в DOM і в закритому стані має лише
   visibility: hidden, тобто продовжує займати 268px і на 390px виїжджає за
   вьюпорт (заміряно в iframe 390px: з щитом overflow 0px, без нього — є).
   Горизонтальний скрол на мобільному гірший за неприлиплий сайдбар.

   Сам баг шапки — не наш і не цього релізу: він у всіх типів сторінок, де
   контейнер .wrapper, і заслуговує окремого тікета. */

/* На вузьких екранах TOC згорнутий: 20 пунктів перед статтею — це екран
   прокрутки до самого тексту. */
@media screen and (max-width: 1199px) {
  .kb-toc__toggle { cursor: pointer; }

  .kb-toc__chevron {
    position: relative;
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }

  .kb-toc__chevron::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--kb-text-muted);
    border-bottom: 2px solid var(--kb-text-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }

  .kb-toc__list { display: none; }
  .kb-toc--open .kb-toc__list { display: flex; }
  .kb-toc--open .kb-toc__chevron::before { margin-top: -2px; transform: rotate(-135deg); }
}

/* --- Голосування плагіна (do_action('ht_kb_end_article')) ---
   Розмітку ставить сам Heroic (hkb-templates/hkb-voting-single.php через
   voting/ht-voting.php:38), ми лишили хук як точку розширення. Плагінний
   hkb-style на статті не завантажується, і без цього блока виходило ось що:
   іконки в hkb-voting-single.php — це <svg viewBox="0 0 16 16"> БЕЗ атрибутів
   width/height, тож без CSS кожна розтягувалась на всю ширину колонки. Заміряно
   локально: два svg по 608x608, .hkb-feedback висотою 1303px під кожною статтею.

   На проді голосування вимкнене (display-article-usefulness,
   enable-article-feedback, enable-upvote-article-feedback,
   enable-downvote-article-feedback — усі false; на живій статті прода 0 входжень
   .hkb-feedback). Тобто зараз це видно лише локально — але стилі все одно
   потрібні: інакше перше ж увімкнення прапорця в адмінці ламає всі 745 статей.

   Другий споживач того самого хука — exits/ht-kb-exits.php:42 (блок «Contact
   Support» у кінці статті, класи .hkb-exits / .hkb-exit-shortcode-*). На проді
   він теж не рендериться, і поіменно ми його НЕ стилізуємо — саме тому нижче
   стоїть загальний запобіжник на нерозмірені svg. */

.kb-article-page .hkb-feedback {
  margin-top: 32px;
  padding: var(--kb-pad-card);
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface-50);
}

.kb-article-page .hkb-feedback__title {
  margin-bottom: var(--kb-gap);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--kb-text);
}

.kb-article-page .ht-voting-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-gap);
}

.kb-article-page .ht-voting-upvote,
.kb-article-page .ht-voting-downvote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--kb-gap);
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius-inner);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--kb-text-muted);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Ховер — ЗАЛИВКА градієнтом і білий текст, як у кнопки «Admin Panels» у хедері
   (.site-header__panels у css/new/common.css). Рамку гасимо, інакше вона ріже
   заливку по краю.
   :not(.disabled) — бо при вимкненому анонімному голосуванні плагін ставить
   кнопкам саме цей клас і клік нічого не робить (hkb-voting-form.php); заливка
   під курсором обіцяла б дію, якої не буде. */
.kb-article-page .ht-voting-upvote:not(.disabled):hover,
.kb-article-page .ht-voting-downvote:not(.disabled):hover,
.kb-article-page .ht-voting-upvote:not(.disabled):focus-visible,
.kb-article-page .ht-voting-downvote:not(.disabled):focus-visible {
  border-color: transparent;
  background: var(--kb-gradient-brand);
  color: var(--kb-text);
}

/* Проголосований бік плагін помічає класом .active — заливаємо так само, щоб
   вибір було видно й без ховера. */
.kb-article-page .ht-voting-upvote.active,
.kb-article-page .ht-voting-downvote.active {
  border-color: transparent;
  background: var(--kb-gradient-brand);
  color: var(--kb-text);
}

.kb-article-page .ht-voting-upvote-icon,
.kb-article-page .ht-voting-downvote-icon {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

/* Обидві іконки — інлайновий svg, у якому <g> несе stroke="#444" презентаційним
   атрибутом (hkb-voting-form.php). На нашому темному тлі це майже чорне по
   чорному, а під ховерною заливкою зникає зовсім. Селектор бере саму <g>, а не
   svg: атрибут стоїть на групі, тому stroke, заданий на svg, до неї не дійшов
   би. */
.kb-article-page .ht-voting svg g {
  stroke: currentColor;
}

/* --- Форма відгуку після голосування ---
   Плагін домальовує її ajax-ом одразу після кліку (voting/ht-voting.php
   перерендерює hkb-voting-form.php), тож у першому HTML статті цих класів немає
   — і саме тому вони лишились без стилів: у розмітці, знятій зі сторінки, їх не
   видно. Без hkb-style.css текстове поле й кнопка виходили браузерними
   дефолтами — біла коробка й сіра системна кнопка посеред темної картки.

   Кнопка повторює .kb-btn, але меншим кеглем: 20px, як у головних кнопок
   розділу, тут завеликі для футера картки. */

.kb-article-page .ht-voting-comment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kb-gap);
  margin-top: var(--kb-gap);
}

.kb-article-page .ht-voting-comment__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--kb-gap);
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius-inner);
  background: var(--kb-bg);
  font-family: inherit;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--kb-text);
  resize: vertical;
}

.kb-article-page .ht-voting-comment__textarea::placeholder {
  color: var(--kb-placeholder);
}

.kb-article-page .ht-voting-comment__textarea:focus {
  border-color: var(--kb-accent);
  outline: none;
}

.kb-article-page .ht-voting-comment__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--kb-gap-large);
  border: 0;
  border-radius: var(--kb-radius-btn);
  background: var(--kb-gradient-brand);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--kb-text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.kb-article-page .ht-voting-comment__submit:hover,
.kb-article-page .ht-voting-comment__submit:focus-visible {
  background: var(--kb-gradient-brand-hover);
}

/* Два інші кінцевих стани тієї ж форми: подяка замість поля (коли форму відгуку
   вимкнено) і вимога залогінитись (коли анонімне голосування вимкнене). */
.kb-article-page .ht-voting-thanks,
.kb-article-page .voting-login-required {
  margin-top: var(--kb-gap);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--kb-text-muted);
}

/* Запобіжник: будь-який svg без власних розмірів усередині тіла статті. Наші
   інлайнові іконки сюди не потрапляють — вони живуть у сайдбарі, поза
   .kb-article-single, і розмір їм дає клас .kb-doc-icon. */
.kb-article-page .kb-article-single svg:not([width]):not([height]) {
  width: 16px;
  height: 16px;
  fill: currentColor;
}