/* Кастомізація pico.css під CSS.in.ua */

:root {
    --pico-font-size: 100%;
}

/* --- Семантичні кольори станів (канон: core-conventions) ---
   Єдина мапа «стан → колір»; у решті коду вживати ЛИШЕ ці токени.
   Нові хекси станів дозволені тільки тут (плюс палітри коду --cm-* нижче,
   синхронні з темами hljs). */
:root {
    --color-error: var(--pico-del-color);
    --color-success: var(--pico-ins-color);
    /* жовтого «тексту попередження» pico не має — єдиний власний хекс станів */
    --color-warning: #b58900;
    --color-pending: var(--pico-muted-color);
}

/* --- Флеші (base.html.twig) і стани форм --- */
/* Тип флеша видно кольоровою смугою і легким відтінком тла; базові кольори —
   з pico-змінних, тож обидві теми обслуговуються самі. */
.flash {
    border-inline-start: 0.25rem solid var(--pico-muted-border-color);
}
.flash-success {
    border-inline-start-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 8%, var(--pico-card-background-color));
}
.flash-error {
    border-inline-start-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 8%, var(--pico-card-background-color));
}
.flash-warning {
    border-inline-start-color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--pico-card-background-color));
}
/* Помилка рівня форми/фрагмента (422-ререндери, FormError без поля) */
.form-error {
    color: var(--color-error);
}
/* Мітка статусу «на перевірці» (status_badge з _ui.html.twig) */
.status-pending {
    color: var(--color-pending);
    font-style: italic;
}

/* --- Дрібні утиліти --- */
.nowrap { white-space: nowrap; }
.prewrap { white-space: pre-wrap; }
/* Ряд «капча + кнопка сабміту» (_captcha_actions.html.twig): капча в один ряд
   із кнопкою, на вузьких екранах переносяться й кнопка на всю ширину */
.captcha-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pico-spacing);
    align-items: flex-start;
}
/* span.captcha-submit — обгортка кнопки, носій pico-тултіпа «пройдіть капчу»:
   disabled-кнопка у Firefox не показує ні title, ні :hover. Флекс-розміри
   живуть на обгортці, кнопка заповнює її. Скидаємо декор pico для
   [data-tooltip]-не-кнопок (пунктирне підкреслення, cursor:help). */
.captcha-actions .captcha-submit {
    flex: 1;
    min-width: 12rem;
    border-bottom: none;
    cursor: default;
}
.captcha-actions .captcha-submit button[type="submit"] {
    width: 100%;
    margin-bottom: 0;
}
/* Коли поруч капча — рівняємо кнопку під висоту віджета Turnstile (65px);
   без капчі (залогінені) кнопка звичайної висоти й не тягнеться — стоїть
   праворуч, на одній вертикалі з іншими правобічними діями (напр. «Відповісти»
   в коментарях) */
.captcha-actions:has(.cf-turnstile) button[type="submit"] { height: 65px; }
.captcha-actions:not(:has(.cf-turnstile)) .captcha-submit {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
}
.captcha-actions > .cf-turnstile { flex: 0 0 auto; }

/* Wanted-списки /contribute (WANTED_PLAN): джерело сторінки — чистий markdown,
   тож колонки дає не .grid-розмітка, а сам список — ширина колонки замість
   фіксованої кількості, щоб на вузьких екранах він сам ставав одноколонковим */
.wanted-list { columns: 14rem; }

/* Alpine: приховати елементи до ініціалізації */
[x-cloak] {
    display: none !important;
}

a > code {
    text-decoration: underline;
}

/* --- Доступність --- */

/* Текст лише для екранних читачів: прибраний з візуального потоку, але лишається
   в дереві доступності. НЕ display:none і не visibility:hidden — ті ховають і від
   читача теж. clip-path + розмір 1px — сучасний варіант старого clip-хака.
   white-space:nowrap не дає тексту схлопнутися у вертикальний стовпчик до обрізання. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Посилання «до вмісту»: перший таб на сторінці. Без нього клавіатурний і
   незрячий користувач змушений перебирати все ліве меню довідника (сотні
   посилань) на КОЖНІЙ сторінці. Ховається тим самим прийомом, але спливає
   на фокусі — тож зрячим не заважає. */
.skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    overflow: visible;
    clip-path: none;
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-radius: var(--pico-border-radius);
    text-decoration: none;
}

/* htmx: індикатор завантаження */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Шапка */
header.site-header {
    padding-block: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}
header.site-header nav img.logo {
    max-height: 2.5rem;
}

/* Перемикач теми — іконка-кнопка без тла */
.theme-toggle {
    width: auto;
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    box-shadow: none;
    /* та сама пастка, що й у .nav-burger — тут її ховає кольорове емодзі */
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.theme-toggle:hover,
.theme-toggle:focus {
    background: none;
    opacity: 0.7;
}

/* Кнопка, що виглядає як посилання. Для дій, які нікуди не ведуть (відкрити
   діалог), але сидять усередині речення — семантика кнопки, вигляд лінка.
   Скидаємо все, що pico вішає на <button>: тло, рамку, тінь, ширину, відступи. */
/* ЄДИНИЙ reset «кнопка-як-текст» (канон: core-conventions). Варіанти
   (.ref-comment-reply-btn, .sandbox-cabinet-text) додають лише свої відмінності. */
.link-button,
button[type="button"].ref-comment-reply-btn,
.sandbox-cabinet-text {
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    /* та сама пастка, що й у .nav-burger: усередині <button> pico перевизначає
       --pico-color на --pico-primary-inverse (білий) */
    color: var(--pico-primary);
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}
.link-button {
    display: inline;
    text-decoration: underline;
}
.link-button:hover,
.link-button:focus {
    background: none;
    color: var(--pico-primary-hover);
}

/* Ряд кнопок, що переноситься на вузьких екранах.
   Сусідні <a role="button"> — інлайн-блоки, розділені лише пробілом у розмітці:
   горизонтальний проміжок давав саме той пробіл, а вертикального не було, тож
   при переносі рядки злипалися. Флекс із gap дає однаковий проміжок в обох осях.

   Ловимо контейнер через :has(), щоб не проставляти клас руками. Свідомо звужено
   до p і footer з кнопкою-прямою-дитиною: у <td> адмінки кнопки теж є, але
   робити комірку флексом не можна, а <div role="group"> у pico — це навмисно
   склеєна смуга, яку ламати не треба. */
:is(p, footer):has(> :is(button, [role='button'])) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
:is(p, footer):has(> :is(button, [role='button'])) > * {
    margin-bottom: 0;
}

/* --- Адаптивна навігація (бургер, як у pico на вузьких екранах) --- */
/* Проміжок між групами посилань головного меню (замість &nbsp;-розділювача);
   на мобільному меню вертикальне — там відступ не потрібен */
@media (min-width: 1024px) {
    .nav-gap { margin-inline-start: calc(var(--pico-spacing) * 2); }
}

/* Десктоп: .nav-menu «розчиняється», його <ul> стають прямими flex-дітьми nav,
   тож ряд виглядає як раніше; бургер прихований. */
.nav-menu {
    display: contents;
}
.nav-burger-wrap {
    display: none;
}
.nav-burger {
    width: auto;
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    box-shadow: none;
    /* НЕ var(--pico-color): усередині <button> pico перевизначає її на
       --pico-primary-inverse (білий), тож на світлій темі кнопка ставала
       білою по білому. inherit бере колір тексту сторінки. */
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.nav-burger:hover,
.nav-burger:focus {
    background: none;
    opacity: 0.7;
}

/* Вхід в адмінку — шестерня; підпис лишається для скрінрідерів і мобільного меню.
   display:flex (а не inline-flex) навмисно: рядковий бокс брав би базову лінію
   від гліфа, і той тягнув би за собою місце під виносні елементи шрифту —
   іконка задиралася б над сусідніми пунктами. Блоковий флекс базової лінії не має,
   тож іконку центрує вже `nav ul { align-items: center }` з pico. */
.nav-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-control-icon {
    flex: none;
    font-size: 1.35rem;
    line-height: 1;
}
.nav-control-label {
    display: none;
}

@media (max-width: 1023.98px) {
    /* Верхній ряд: лише лого + бургер, решта переноситься нижче */
    header.site-header nav {
        flex-wrap: wrap;
    }
    .nav-burger-wrap {
        display: block;
    }
    /* Меню згорнуте; розкривається бургером на всю ширину під шапкою */
    .nav-menu {
        display: none;
        flex-basis: 100%;
        width: 100%;
    }
    .nav-menu.nav-open {
        display: block;
        padding-bottom: 0.5rem;
    }
    .nav-menu ul {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .nav-menu li {
        width: 100%;
    }
    .nav-menu li > a,
    .nav-menu li > button,
    .nav-menu .dropdown > summary {
        display: block;
        width: 100%;
    }
    /* У згорнутому меню сама іконка нечитабельна — повертаємо підпис */
    .nav-menu li > a.nav-control {
        display: flex;
    }
    .nav-control-label {
        display: inline;
    }
    /* Випадне меню профілю всередині згорнутого — звичайним потоком */
    .nav-menu .dropdown[open] > ul {
        position: static;
    }
}

/* --- Ліві меню (довідник / головна / публікації / адмінка): один стиль ---
   Спільний вигляд списків, заголовків, посилань. Вертикаль форсуємо явно
   (display:block на ul/li), бо pico робить nav-списки горизонтальними. */
.side-menu {
    font-size: 0.9rem;
}
/* pico вішає негативний margin на крайні nav>ul (компенсація padding у nav li);
   у вертикальному меню це зсуває перший/останній список — гасимо через змінну */
.side-menu nav {
    --pico-nav-element-spacing-horizontal: 0;
}
.side-menu :is(h2, h3, h4) {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.35rem;
}
.side-menu ul {
    display: block;
    padding-left: 0;
    margin: 0 0 1rem;
}
.side-menu li {
    display: block;
    list-style: none;
    padding: 0;
}
/* Чисті лінки як у шапці: колір посилання, без підкреслення, підкреслення на
   hover. margin:0 гасить негативний margin, який pico вішає на nav li :where(a)
   (без нього посилання у <li> зсуваються ліворуч від решти списку). */
.side-menu a {
    display: block;
    margin: 0;
    padding: 0.15rem 0;
    text-decoration: none;
}
.side-menu a:hover {
    text-decoration: underline;
}
/* Єдиний спосіб підсвітки в бічних меню — сторінка, на якій ти зараз: лише
   жирний, без фону й рамки. Ставиться з aria-current="page" (див.
   control/_menu.html.twig); жодних <strong> чи заголовків-посилань, які
   виглядають активними завжди. */
.side-menu a[aria-current='page'] {
    font-weight: bold;
    text-decoration: none;
}
.side-menu input[type='search'] {
    margin-bottom: 0.5rem;
}
/* Бейдж неопрацьованого (публікації/пропозиції/повідомлення/лог у адмінці):
   лічильник притиснутий до правого краю пункту меню. */
.side-menu a:has(.menu-badge) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.menu-badge {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-radius: 1rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 1.3;
}

/* Тоггл згортання лівого меню (варіант 1, див. app.js). Десктоп: summary
   приховано, <details open> показує вміст нативно — працює скрізь. */
.side-toggle > summary {
    display: none;
}

/* Розкладки з лівим меню */
.ref-grid,
.home-grid,
.pub-grid,
.help-grid,
.control-grid {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
/* Довідник і публікації — спільна 3-колонкова сітка (меню | контент | сайдбар),
   щоб контентна картка мала однакову ширину в обох розділах. */
.ref-grid,
.pub-grid {
    grid-template-columns: 14rem 1fr 15rem;
}
/* Спільна колонка контенту довідника/публікацій/адмінки (середній трек сітки).
   Гнучка колонка не має роздуватися під інтринсивну ширину вмісту (широкі
   <img>/<pre>/таблиці). Без min-width:0 grid-трек 1fr росте за розміром вмісту,
   і max-width:100% на зображеннях міряється від уже роздутої колонки →
   горизонтальна прокрутка всієї сторінки. */
.content-col {
    min-width: 0;
}
.home-grid {
    grid-template-columns: 14rem 1fr;
}
/* «Як допомогти»: контент + правий зміст-навігатор (лівого меню немає) */
.help-grid {
    grid-template-columns: 1fr 15rem;
}
/* зміст «На цій сторінці» (_page_nav) — без маркерів, чисті лінки */
.page-nav ul {
    padding-left: 0;
    margin: 0;
}
.page-nav li {
    list-style: none;
    padding: 0.1rem 0;
}
.control-grid {
    grid-template-columns: 13rem 1fr;
}

/* Бічні колонки (ліві меню + правий сайдбар) — липкі й самостійно прокручувані.
   top: 1.5rem — зазор від шапки, коли колонка прилипла (шапка вже прокручена).

   max-height рахує app.js динамічно за реальним верхом колонки (див. sizeStickyCols),
   бо доступна висота залежить від прокрутки. Значення нижче — лише запасний варіант
   без JS: із запасом на висоту шапки (~7rem), щоб і на верху сторінки низ довгого
   меню не вилазив за екран. */
.side-menu,
.pub-sidebar {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 7.5rem);
    /* обидві осі явно: сам overflow-y:auto потяг би за собою overflow-x:auto */
    overflow: hidden auto;
}

/* Правий сайдбар (мітки + заклик у публікаціях, посилання + заклик у довіднику) */
.pub-sidebar {
    font-size: 0.9rem;
}
.pub-sidebar h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.tag-cloud a {
    margin-right: 0.4rem;
    white-space: nowrap;
}
/* Розмір мітки за кошиком ваги (PublicationPageBuilder::tagWeights → 1..5).
   em, а не pt: масштабується разом зі шрифтом сайдбара, друкарських одиниць на
   екрані немає. Крок стриманий — хмара має натякати на частоту, не кричати. */
.tag-w1 { font-size: 0.85em; }
.tag-w2 { font-size: 1em; }
.tag-w3 { font-size: 1.2em; }
.tag-w4 { font-size: 1.45em; }
.tag-w5 { font-size: 1.7em; }

/* Авторизація */
.auth-card {
    max-width: 26rem;
    margin: 2rem auto;
}
/* Заголовки карток профілю: справжні <h2> (навігація читачем), але в шапці
   картки — розміром із підпис, а не з повновагий заголовок */
.profile-grid article > header h2 {
    margin: 0;
    font-size: 1.1rem;
}
.auth-error {
    color: var(--color-error);
}

/* Публікації: контент */
.pub-article img {
    max-width: 100%;
    display: block;
}
a.pub-title {
    color: inherit;
}
/* Індикатор активної мітки-фільтра над списком публікацій (не заголовок) */
.filter-note {
    font-weight: bold;
    margin-bottom: 1rem;
}
/* Мета-рядок публікації: мітки й дата в один ряд, проміжок дає gap (замість
   &nbsp;-розділювача); на вузьких екранах дата переноситься під мітки */
.pub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.5rem;
    align-items: baseline;
}
.pub-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: baseline;
}
/* pico робить nav флексом із space-between — інакше єдиний ul лишається ліворуч */
.pagination {
    justify-content: center;
}
.pagination ul {
    flex-wrap: wrap;
    justify-content: center; /* центрує рядки, коли сторінок багато і вони переносяться */
    gap: 0.5rem;
}
/* Розрив «…» у вікні пагінації — приглушений, не клікабельний */
.pagination-gap {
    color: var(--pico-muted-color);
    padding-inline: 0.25rem;
}

/* Адмінка: інше */
.control-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.control-inline-btn {
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    width: auto;
    margin-bottom: 0;
}
.control-tabs,
.control-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.control-pager {
    margin-top: 0.5rem;
}
tr.log-unread td {
    font-weight: bold;
}

/* Мобільний: одна колонка; ліве меню стає складаним тоглом */
@media (max-width: 1023.98px) {
    .ref-grid,
    .home-grid,
    .pub-grid,
    .help-grid,
    .control-grid {
        grid-template-columns: 1fr;
    }
    /* меню не ховаємо — воно стає тоглом; скидаємо липкість/обмеження висоти.
       Правий сайдбар так само перестає бути липким і йде звичайним потоком. */
    .side-menu,
    .pub-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .side-toggle > summary {
        display: block;
        cursor: pointer;
        padding: 0.6rem 0.25rem;
        font-weight: bold;
        border-bottom: 1px solid var(--pico-muted-border-color);
    }
    .side-toggle[open] > summary {
        border-bottom: none;
    }
}

/* --- Редактор markdown (CodeMirror, assets/md-editor.js) ---
   CodeMirror несе власні мінімальні стилі й нічого не знає про pico: колір, рамку
   й фокус беремо з тих самих змінних, що й у звичайних полів, тож редактор
   виглядає як input і сам стежить за світлою/темною темою. */
.cm-editor {
    margin-bottom: var(--pico-spacing);
    max-height: 70vh;
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-form-element-background-color);
    color: var(--pico-form-element-color);
}
.cm-editor.cm-focused {
    outline: none;
    border-color: var(--pico-form-element-active-border-color);
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}
.cm-editor .cm-scroller {
    font-family: var(--pico-font-family);
    line-height: var(--pico-line-height);
}
.cm-editor .cm-content {
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    caret-color: var(--pico-form-element-color);
    /* редактор часто стоїть усередині <label>, а pico дає label cursor:default —
       без явного text курсор над «полем» не мінявся на введення */
    cursor: text;
}
.cm-editor .cm-cursor {
    border-left-color: var(--pico-form-element-color);
}
/* drawSelection малює виділення сам — ::selection на нього не діє */
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground {
    background: var(--pico-form-element-focus-color);
}
.cm-editor .cm-placeholder {
    color: var(--pico-form-element-placeholder-color);
}

/* Спливна панель над виділенням */
.cm-editor .cm-tooltip {
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
}
.cm-editor .cm-tooltip-arrow::before,
.cm-editor .cm-tooltip-arrow::after {
    border-top-color: var(--pico-muted-border-color);
}
.md-bubble {
    display: flex;
    gap: 0.15rem;
    padding: 0.2rem;
    color: var(--pico-color);
}
.md-bubble button {
    width: auto;
    min-width: 2rem;
    margin: 0;
    padding: 0.1rem 0.4rem;
    border: none;
    background: transparent;
    box-shadow: none;
    /* та сама пастка, що в .nav-burger: усередині <button> pico перевизначає
       --pico-color на --pico-primary-inverse (білий) — беремо колір із панелі */
    color: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
}
.md-bubble button:hover {
    background: var(--pico-secondary-background);
    color: var(--pico-secondary-inverse);
}

/* Markdown-таблиці користувацького контенту */
table.md-table td,
table.md-table th {
    border: 1px solid var(--pico-muted-border-color);
}

/* Довгий код-рядок у табличці extra-полів (напр. object.style.alignContent='center')
   не має роздувати table-layout:auto ширше за картку. overflow-wrap:anywhere (на
   відміну від break-word) зменшує min-content таблиці, тож вона вписується у вузький
   екран. Свідомо лише .ref-extra: таблицю переглядачів прокручує власний .table-scroll,
   і там перенос ламав би назви на кшталт «align-content». */
.ref-extra :is(td, th) {
    overflow-wrap: anywhere;
}

/* Довідник: контент */
.table-scroll {
    overflow-x: auto;
}

.content-col img {
    max-width: 100%;
}
/* Примітки (поради/нотатки): пари «мітка → текст». dt жирна, dd з відступом —
   стандартний вигляд списку означень (був <table> без заголовків) */
dl.ref-notes {
    margin: 1rem 0;
}
dl.ref-notes dt {
    font-weight: bold;
}
dl.ref-notes dd {
    margin: 0 0 0.75rem;
}
dl.ref-terms {
    margin-inline-start: 2em;
}
dl.ref-terms dd {
    margin-bottom: 0.5rem;
}
dl.ref-terms code.linked {
    color: var(--pico-primary); /* #0172ad у світлій темі, світліший у темній */
}
.ref-tabs {
    margin-bottom: 1rem;
    /* pico робить role="group" нерозривним рядком; на вузьких екранах смуга
       вкладок ширша за картку й дає горизонтальну прокрутку — дозволяємо перенос */
    flex-wrap: wrap;
}
/* Вкладки в хедері картки (профіль): відступ під ними дає сам хедер своїм
   padding-ом, а margin групи лише роздував шапку порожниною знизу */
article > header .ref-tabs {
    margin-bottom: 0;
}
/* /contribute: у хедері картки заголовок ліворуч, вкладки праворуч. Групу
   вкладок стискаємо до вмісту — інакше pico тягне role="group" на всю ширину. */
.contribute-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
.contribute-head h1 { margin-bottom: 0; }
.contribute-head .ref-tabs {
    width: auto;
    margin-left: auto;
    /* Хедер картки pico має менший вертикальний padding (×.66) за горизонтальний,
       тож група стоїть далі від правого краю, ніж від верху/низу. Підтягуємо її
       праворуч на різницю, щоб відступ праворуч дорівнював верх/низ. */
    margin-right: calc(var(--pico-block-spacing-vertical) * .66 - var(--pico-block-spacing-horizontal));
}
/* Підпис над блоком коду (HTML / CSS / JS) у складеному прикладі. Тулиться до
   свого <pre>: типовий відступ абзацу pico відірвав би підпис від коду й приклеїв
   до попереднього блоку — читалося б як підпис не до того. */
.code-label {
    margin-bottom: .25rem;
    color: var(--pico-muted-color);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.ref-extra th {
    text-align: left;
    padding-inline-end: 1rem;
}

/* Платформа в таблиці переглядачів стала th[scope=row] — щоб екранний читач зв'язав
   версію і з переглядачем (стовпець), і з платформою (рядок). Візуально це має
   лишитися тією самою коміркою, що й була: pico робить будь-який th жирним. */
.table-browser th[scope='row'] {
    font-weight: normal;
}

/* Іконки браузерів: фіксований бокс, щоб зарезервувати місце до завантаження
   (width/height стоять і в розмітці). Гіфки різного розміру — 24–31×30–35, —
   тому contain, а не stretch: інакше вузькі (mob-android) розтягувало б. */
.table-browser img {
    width: 31px;
    height: 35px;
    object-fit: contain;
}
/* Аватар (макрос ui.avatar): без фіксованого розміру картинка стрибала на весь
   натуральний розмір. Без зображення — кружечок із першою літерою імені. */
.avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
}
.avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--pico-primary) 14%, var(--pico-background-color));
    color: var(--pico-primary);
    font-weight: 700;
    font-size: 3.4rem;
}
.avatar-sm { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
.avatar-xs { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; }

/* Заголовок групи в лівому меню (категорія з ref_category). Не посилання й не
   заголовок секції — тому окремий стиль: приглушений, з відступом зверху, щоб
   візуально розділяти блоки, але не сперечатися з <h2> над списком. */
.menu-group {
    display: block;
    margin: 0.9rem 0 0.2rem;
    color: var(--pico-muted-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.menu-group:first-child {
    margin-top: 0;
}

/* Пояснювальний блок (callout): смуга ліворуч + приглушений текст. Загальний —
   пояснення над таблицями SEO-кабінету, підказки квесту «Покращення» тощо
   (спершу жив як .seo-hint, але префікс тік за межі SEO-розділу). */
.callout {
    border-inline-start: 3px solid var(--pico-primary);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
}
.callout p { margin: 0 0 0.4rem; }
.callout p:last-child { margin-bottom: 0; }

/* — SEO-кабінет — */
/* Топ-запити прямо в рядку черги — саме вони роблять її чесною */
.seo-queries span { display: block; white-space: nowrap; }
.seo-queries small { color: var(--pico-muted-color); }
.seo-panel {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.seo-panel summary { cursor: pointer; }
.seo-panel table { font-size: 0.9rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Скорочення в шапці таблиць SEO: показуємо, що термін має пояснення */
.seo-panel abbr[title], .control-grid abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}
/* Панель знімка: перемикач періоду і кнопка нового прогону — одним рядком */
.seo-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.seo-bar form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.seo-bar label { margin: 0; white-space: nowrap; }
.seo-bar select, .seo-bar button { width: auto; margin: 0; }
.seo-bar-hint { max-width: 75ch; margin-bottom: 1rem; }
.seo-bar-hint small { color: var(--pico-muted-color); }
/* Кнопка «усі запити» — не мусить розтягуватись на всю комірку */
.seo-more {
    width: auto;
    margin: 0.35rem 0 0;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
}
.seo-expand > td { background: var(--pico-card-sectioning-background-color); }

/* — Графіки SEO — */
/* Чотири малі полотна поруч (small multiples), а не одне з двома осями:
   покази йдуть тисячами, кліки десятками, позиція взагалі не лічильник. */
.seo-charts {
    display: grid;
    /* Чотири в ряд, поки є місце; на вузькому — по два. Три + один сиротою
       (як давав auto-fit) читається як помилка верстки. */
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}
.seo-chart { margin: 0; }
.seo-chart figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
}
.seo-chart figcaption small { color: var(--pico-muted-color); }
.seo-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Тонка лінія, стримана заливка: дані попереду, оформлення позаду */
.seo-chart .line {
    fill: none;
    stroke: var(--pico-primary);
    stroke-width: 2;
    stroke-linejoin: round;
}
.seo-chart .area {
    fill: var(--pico-primary);
    fill-opacity: 0.12;
    stroke: none;
}
.seo-chart .dot { fill: var(--pico-primary); stroke: var(--pico-card-background-color); stroke-width: 2; }
.seo-chart .crosshair { stroke: var(--pico-muted-border-color); stroke-width: 1; }
.seo-chart .hit { fill: transparent; }
@media (max-width: 900px) {
    .seo-charts { grid-template-columns: repeat(2, 1fr); }
}
/* На телефоні два спарклайни в ряд уже тісні — останній крок до однієї колонки */
@media (max-width: 560px) {
    .seo-charts { grid-template-columns: 1fr; }
}
.seo-chart-read {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    min-height: 1.2em;
}
/* Спарклайн у рядку запиту: сама форма тренду, без осей і чисел */
.seo-spark {
    width: 120px;
    height: 24px;
    display: block;
}
.seo-spark polyline {
    fill: none;
    stroke: var(--pico-primary);
    stroke-width: 1.5;
}
/* Заголовок над блоком графіків: відрізняє «сторінка загалом» від графіків окремих запитів */
.seo-page-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
}
.seo-page-title small { color: var(--pico-muted-color); font-weight: normal; }
/* Перевірка попиту на вкладці «Прогалини» */
.seo-demand {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}
.seo-demand input { margin: 0; max-width: 34ch; }
.seo-demand button { width: auto; margin: 0; white-space: nowrap; }
#demand-results.htmx-request { opacity: 0.5; }
/* Лічильники плану наповнення: «239 на сайті + 28 у плані» */
.seo-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.seo-counts small { color: var(--pico-muted-color); }

/* --- Сніпети прикладів (sandbox-snippet.js) і пісочниця /sandbox (sandbox.js) --- */
.sandbox-box { margin-bottom: 1.5rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; }
.sandbox-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: var(--pico-card-sectioning-background-color, var(--pico-muted-border-color));
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.sandbox-spacer { flex: 1; }
.sandbox-tool {
    width: auto;
    margin: 0;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: transparent;
    color: var(--pico-muted-color);
    box-shadow: none;
    text-decoration: none;
}
.sandbox-tool[aria-pressed="true"] { background: var(--pico-primary); border-color: var(--pico-primary); color: var(--pico-primary-inverse); }
a.sandbox-expand { color: var(--pico-primary); font-size: 0.95rem; }

/* сніпет на сторінці сутності: код | результат */
.sandbox-box { display: grid; grid-template-columns: 1fr; }
.sandbox-box .sandbox-bar { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .sandbox-box:not(.sandbox-single) { grid-template-columns: 1fr 1fr; }
}
.sandbox-editors { display: flex; flex-direction: column; min-width: 0; }
.sandbox-pane { display: flex; flex-direction: column; flex: 1; margin: 0; }
.sandbox-pane small { padding: 0.15rem 0.75rem; color: var(--pico-muted-color); font-size: 0.7rem; letter-spacing: 0.06em; }
.sandbox-pane textarea {
    flex: 1;
    margin: 0;
    border: 0;
    border-radius: 0;
    resize: vertical;
    font-family: var(--pico-font-family-monospace, monospace);
    font-size: 0.8rem;
    line-height: 1.45;
}
.sandbox-pane textarea:focus { box-shadow: none; }
.sandbox-result { display: flex; flex-direction: column; min-width: 0; border-inline-start: 1px solid var(--pico-muted-border-color); }
/* Обгортка iframe перегляду — система координат для лоадера */
.sandbox-view { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* «Оновлюю…» (sandbox-core.js, createLoader) — вуаль по центру перегляду;
   полотно iframe завжди біле (BASE_CSS), тож кольори фіксовані під нього */
.sandbox-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #111;
    background: rgba(255, 255, 255, 0.65);
    pointer-events: none;
}
.sandbox-single .sandbox-result { border-inline-start: 0; }
.sandbox-frame {
    width: 100%;
    min-height: 260px;
    flex: 1;
    border: 0;
    background: #fff; /* приклади писались під світлу сторінку — тло фіксоване */
}
.sandbox-console {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    max-height: 160px;
    overflow: auto;
    border-top: 1px solid var(--pico-muted-border-color);
    border-radius: 0;
}
.sandbox-console .sandbox-lines:empty::before { content: "Консоль порожня"; color: var(--pico-muted-color); }
.sandbox-console .sandbox-line-warn { color: var(--color-warning); }
.sandbox-console .sandbox-line-error { color: var(--color-error); }
/* кнопка «Очистити» в правому верхньому куті консолі (лише пісочниця);
   sticky — лишається на місці й при прокруті довгого виводу */
.sandbox-console-clear { float: right; position: sticky; top: 0; margin: 0 0 0.3rem 0.5rem; }

/* «Моя пісочниця»: опис згорнуто x-collapse-ом до ~1.5 рядка (обріз на пів
   рядка сам натякає на продовження), клік по опису плавно розгортає.
   Блок має role="button" для скрін-рідерів — знімаємо pico-стилі кнопки */
.sandbox-cabinet-desc { min-width: 22rem; }
/* pico вирівнює td по середині: згорнутий опис (нижчий за сусідів) центрувало,
   розгорнутий притискало догори — текст стрибав по вертикалі при кожному кліку */
.sandbox-cabinet-table td { vertical-align: top; }
/* решта скиду — у спільному reset «кнопка-як-текст» (.link-button і компанія) */
.sandbox-cabinet-text {
    display: block;
    border-radius: 0;
    color: inherit;
    text-align: left;
    white-space: pre-line;
}
.sandbox-cabinet-code { color: var(--pico-muted-color); font-family: var(--pico-font-family-monospace); font-size: 0.85em; }

/* пісочниця /sandbox: опис і редактори рядком, перегляд і консоль на всю ширину.
   Усі правила ЗАСКОУПЛЕНІ під .sandbox-page — інакше вони перебивали б однойменні
   правила сніпета на сторінці сутності (той живе в .sandbox-box): голий
   .sandbox-editors нижче вигравав каскадом у флекс-версії сніпета, а голий
   .sandbox-frame домальовував сніпету другу рамку поверх рамки .sandbox-box. */
.sandbox-page .sandbox-editors { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin: 0.5rem 0; }
@media (min-width: 900px) { .sandbox-page .sandbox-editors { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.sandbox-page .sandbox-pane small { color: var(--pico-muted-color); font-size: 0.7rem; letter-spacing: 0.06em; }
.sandbox-pane .cm-editor {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    max-height: 44vh;
    min-height: 8rem;
    font-size: 0.85rem;
    background: var(--pico-form-element-background-color);
}
.sandbox-pane .cm-editor.cm-focused { outline: none; border-color: var(--pico-primary); }
/* Кольори підсвітки коду в редакторах (розмітка тегів — codeHighlight у
   sandbox.js) — палітри github/github-dark, ті самі, що у статичних блоках hljs */
:root {
    --cm-keyword: #d73a49;
    --cm-string: #032f62;
    --cm-constant: #005cc5;
    --cm-title: #6f42c1;
    --cm-tag: #22863a;
    --cm-comment: #6a737d;
}
[data-theme="dark"] {
    --cm-keyword: #ff7b72;
    --cm-string: #a5d6ff;
    --cm-constant: #79c0ff;
    --cm-title: #d2a8ff;
    --cm-tag: #7ee787;
    --cm-comment: #8b949e;
}
/* дефолтні ґаттери CodeMirror завжди світлі — у темній темі це біла смуга
   з номерами рядків; фарбуємо змінними pico, як решту редактора */
.cm-editor .cm-gutters {
    background: var(--pico-form-element-background-color);
    color: var(--pico-muted-color);
    border-right: 1px solid var(--pico-muted-border-color);
}
/* системний скролбар редактора у темній темі світиться білою смугою */
.cm-editor .cm-scroller {
    scrollbar-color: var(--pico-muted-border-color) transparent;
    scrollbar-width: thin;
}
/* markdown-опис прикладу: невисоке поле над редакторами коду */
.sandbox-desc { margin: 0.5rem 0; }
.sandbox-desc .cm-editor { max-height: 30vh; min-height: 3rem; }
/* діалог збереження: у режимі пропозиції — дві кнопки-варіанти з поясненнями */
.sandbox-save-dialog article { max-width: 28rem; }
.sandbox-save-option { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; }
.sandbox-save-option + .sandbox-save-option { margin-top: 0.75rem; }
.sandbox-save-option small { font-weight: normal; color: var(--pico-muted-color); }
.sandbox-save-option:disabled small { color: inherit; }
/* гостьова капча всередині діалога збереження */
.sandbox-save-captcha { margin: 1rem 0 0.5rem; }
.sandbox-save-captcha small { display: block; margin-top: 0.35rem; color: var(--pico-muted-color); }
.sandbox-save-result { margin: 0; overflow-wrap: anywhere; }
.sandbox-save-result hr { margin: 0.75rem 0; }
.sandbox-page .sandbox-frame { min-height: 300px; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.sandbox-page .sandbox-console { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); margin-top: 0.5rem; max-height: 220px; }
.sandbox-console .sandbox-line-note { color: var(--pico-muted-color); font-style: italic; }
/* Заглушка замість автозапуску прикладів із prompt/alert */
.sandbox-runner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    min-height: 260px;
    padding: 1rem;
    text-align: center;
    background: var(--pico-card-background-color);
}
.sandbox-runner button { width: auto; margin: 0; }
.sandbox-runner small { color: var(--pico-muted-color); }

/* --- Пропозиції відвідувачів (COMMUNITY_PLAN, етап A) --- */
.ref-propose { margin: 1rem 0; }
/* Редактор markdown живе в модалці — 70vh загального правила виїдали б її всю */
.ref-propose .cm-editor { max-height: 40vh; }
.ref-propose summary { color: var(--pico-primary); }
.ref-propose-error small { color: var(--color-error); }
.ref-propose-mode { font-size: 0.9rem; }
/* капча поруч із кнопкою, як у формі зворотного зв'язку */
/* --- Масова модерація в /control --- */
.control-check { width: 1%; }
.control-check input[type="checkbox"] { margin: 0; }
/* Панель дій ЛИПКА до низу екрана: черга підвантажується нескінченно, і без
   sticky кнопки «Затвердити/Відхилити позначені» тікали б униз разом із
   новими рядками — дістатися до них було б неможливо. */
.control-bulkbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0;
    background: var(--pico-background-color);
    border-top: 1px solid var(--pico-muted-border-color);
}
.control-bulkbar button { width: auto; margin: 0; }
.control-proposal-kind { color: var(--pico-muted-color); }

/* --- Модалка порівняння пропозиції (/control/proposal) --- */
/* диф широкий — діалогу даємо більше місця, ніж типовій pico-модалці */
.proposal-dialog article { max-width: min(72rem, 94vw); }
.proposal-detail h4 { margin: 0.9rem 0 0.3rem; }
.proposal-meta { color: var(--pico-muted-color); font-size: 0.9rem; }
/* дві живі демки поруч (чинна | пропозиція); на вузькому — одна під одною */
.proposal-previews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.proposal-previews figure { margin: 0; }
.proposal-previews figcaption { font-size: 0.8rem; color: var(--pico-muted-color); margin-bottom: 0.3rem; }
.proposal-previews .sandbox-view { min-height: 12rem; }
/* side-by-side диф: розмітку дає jfcherng/php-diff (.diff-side-by-side —
   таблиця Чинний | Пропозиція), фарбування — наше, тема-залежне; дефолтну
   світлу таблицю бібліотеки не підключаємо */
.proposal-diff { overflow-x: auto; margin: 0.3rem 0 0.7rem; }
.proposal-diff table.diff {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pico-font-family-monospace, monospace);
    font-size: 0.8rem;
}
.proposal-diff th,
.proposal-diff td {
    padding: 0.1rem 0.45rem;
    vertical-align: top;
    text-align: left;
    border: 1px solid var(--pico-muted-border-color);
}
.proposal-diff thead th { background: var(--pico-muted-border-color); font-weight: 600; text-align: center; }
.proposal-diff td.old,
.proposal-diff td.new { width: 50%; white-space: pre-wrap; overflow-wrap: anywhere; }
/* номери рядків — вузькі, приглушені, не виділяються при копіюванні */
.proposal-diff th.n-old,
.proposal-diff th.n-new {
    width: 1%;
    text-align: right;
    color: var(--pico-muted-color);
    user-select: none;
    font-weight: 400;
}
/* Фон боку зміненого рядка за семантикою блоку від бібліотеки: лівий бік
   (старе) червоний, правий (нове) зелений — і для чистих del/ins, і для
   заміни (rep). Порожній протилежний бік — приглушений. Так навіть несхожі
   рядки без послівних міток одразу читаються: ліве видалено, праве додано. */
.proposal-diff .change-del td.old,
.proposal-diff .change-rep td.old { background: color-mix(in srgb, var(--pico-del-color) 9%, transparent); }
.proposal-diff .change-ins td.new,
.proposal-diff .change-rep td.new { background: color-mix(in srgb, var(--pico-ins-color) 9%, transparent); }
.proposal-diff td.none { background: color-mix(in srgb, var(--pico-muted-color) 8%, transparent); }
/* Несхожий рядок заміни (бібліотека не дала послівних міток — немає <del>/<ins>
   всередині): закреслюємо весь старий бік червоним, новий зеленим — твій
   «просто ліве червоне й закреслене, праве зелене». Схожі рядки з мітками це
   правило не чіпає (мітки точніші). */
.proposal-diff .change-rep td.old:not(:has(del)) { color: var(--pico-del-color); text-decoration: line-through; }
.proposal-diff .change-rep td.new:not(:has(ins)) { color: var(--pico-ins-color); }
/* послівна підсвітка всередині схожих змінених рядків */
.proposal-diff del { color: var(--pico-del-color); background: color-mix(in srgb, var(--pico-del-color) 22%, transparent); text-decoration: line-through; }
.proposal-diff ins { color: var(--pico-ins-color); background: color-mix(in srgb, var(--pico-ins-color) 22%, transparent); text-decoration: none; }
.proposal-single { white-space: pre-wrap; }
.proposal-actions { display: flex; gap: 0.75rem; margin-top: 1.2rem; }
.proposal-actions button { width: auto; margin: 0; }

/* --- Коментарі на сторінці сутності (дизайн «аватари») --- */
/* Коментар = сітка «кружечок | текст»; відповіді одного рівня висять на лінії
   треду, зсунутій під колонку аватара. Форма (_comment_form) — та сама сітка,
   тож виглядає як власний майбутній «рядок треду». */
.ref-comment-thread { margin-bottom: 1.5rem; }
.ref-comment,
.ref-comment-form {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.7rem;
}
/* скидаємо картку pico з <article> — коментар без рамок і тіней */
article.ref-comment { padding: 0; margin: 0; background: none; box-shadow: none; border: none; }
.ref-comment header {
    padding: 0;
    margin-bottom: 0.1rem;
    background: none;
    border-bottom: none;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ref-comment header small { color: var(--pico-muted-color); font-size: 0.8rem; }
.ref-comment-body { font-size: 0.95rem; }
.ref-comment-body p:last-child { margin-bottom: 0; }
.ref-comment-children {
    margin: 0.6rem 0 0 2.9rem; /* 2.2rem аватар + 0.7rem gap: лінія на початку колонки тексту */
    padding-left: 0.9rem;
    border-left: 2px solid var(--pico-muted-border-color);
}
.ref-comment-children:empty { display: none; }
.ref-comment-children .ref-comment { grid-template-columns: 1.7rem 1fr; gap: 0.55rem; }
.ref-comment-children .ref-comment + .ref-comment,
.ref-comment-children .ref-comment-form { margin-top: 0.9rem; }
/* форма в гілці — компактніша, під розмір відповіді */
.ref-comment-children .ref-comment-form { grid-template-columns: 1.7rem 1fr; gap: 0.55rem; }
.ref-comment-children .ref-comment-form .avatar-sm { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; }
.ref-comment-form { margin-top: 1.5rem; }
/* .cm-editor — бо md-редактор ховає textarea і стає полем замість неї */
.ref-comment-form textarea,
.ref-comment-form .cm-editor { margin-bottom: 0.6rem; }
/* помилка форми (ліміт, капча, порожній коментар) — упритул під textarea */
.ref-comment-error { margin: -0.2rem 0 0.6rem; }
/* «Скасувати» відповіді — кнопка-як-текст у ряду дій (блок extra_action
   капча-партіала), відцентрована по вертикалі ряду, приглушена поки не наведена */
.ref-comment-cancel {
    align-self: center;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    text-decoration: underline;
}
.ref-comment-cancel:hover,
.ref-comment-cancel:focus {
    color: var(--pico-primary);
}
/* У формі коментаря сабміт не тягнеться НІКОЛИ: пара «Скасувати | Надіслати»
   стоїть праворуч однаково — з капчею і без, у відповіді й у корені. Інакше
   поява капчі чи «Скасувати» перекроювала б ряд (кнопки стрибали б).
   Auto-відступ несе перший елемент правої групи: «Скасувати», коли воно є
   (x-if прибирає його з DOM повністю — :has не ловить прихованого). */
.ref-comment-form .captcha-actions .captcha-submit { flex: 0 0 auto; min-width: 0; margin-left: auto; }
.ref-comment-form .captcha-actions .ref-comment-cancel { margin-left: auto; }
.ref-comment-form .captcha-actions:has(.ref-comment-cancel) .captcha-submit { margin-left: 0; }
.ref-comment-pending { color: var(--color-pending); font-style: italic; font-weight: 600; }
/* решта скиду — у спільному reset «кнопка-як-текст» (.link-button і компанія) */
button[type="button"].ref-comment-reply-btn {
    margin-left: auto;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
}
button[type="button"].ref-comment-reply-btn:hover,
button[type="button"].ref-comment-reply-btn:focus {
    color: var(--pico-primary);
    text-decoration: underline;
}
.ref-comment-mode { font-size: 0.9rem; }
.ref-comment-notice { color: var(--color-success); font-weight: 600; }


/* Код прикладу-пропозиції в черзі модерації */
.control-code-diff {
    margin: 0.15rem 0 0.5rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    max-height: 14rem;
    overflow: auto;
    white-space: pre-wrap;
}

/* Статус «на перевірці» в кабінеті пропозицій */
.contribution-pending { color: var(--color-pending); font-style: italic; }

/* Пагінація «Назад / Вперед» (кабінети, /users) — _pager.html.twig */
.pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}
.pager a[role="button"] { width: auto; margin: 0; }
.pager-page { color: var(--pico-muted-color); }

/* --- Режим пропозицій (гібрид A+C): перемикач у крихтах + вікі-лінки --- */
.crumbs-row { display: flex; align-items: center; gap: 1rem; }
.crumbs-row > ul { flex: 1; min-width: 0; }
.propose-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
}
.propose-toggle input[role="switch"] { margin: 0; }
/* вікі-лінк [правити]: кнопка/лінк у вигляді сірого тексту в дужках */
.wiki-edit {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    font-size: 0.78rem;
    line-height: inherit;
    color: var(--pico-muted-color);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.wiki-edit::before { content: '['; }
.wiki-edit::after { content: ']'; }
.wiki-edit:hover, .wiki-edit:focus-visible { color: var(--pico-primary); background: none; }
.ref-wiki-actions { margin: 0.25rem 0; }
/* атрибуція блоку: дискретний підпис «автор: login» під секцією/приміткою/прикладом */
.ref-author {
    display: block;
    text-align: right;
    margin: 0.25rem 0;
    font-size: 0.78rem;
    color: var(--pico-muted-color);
}
.ref-author a { color: inherit; }
/* бейджі профілю — пігулки з підказкою в title */
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badge {
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 1rem;
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: default;
}
/* топ місяця на /users — рядок під заголовком */
.monthly-top { color: var(--pico-muted-color); }
/* модалка пропозицій — трохи ширша за типову pico-статтю діалога */
.propose-dialog article { width: 100%; max-width: 44rem; }
.propose-dialog textarea { font-family: var(--pico-font-family-monospace, monospace); font-size: 0.85rem; }
.propose-dialog textarea[name="author_note"] { font-family: inherit; font-size: 0.9rem; }

/* Пояснювальна записка автора в черзі модерації */
.control-author-note {
    margin: 0.4rem 0 0.2rem;
    padding: 0.3rem 0.7rem;
    border-left: 3px solid var(--pico-mark-background-color, #ffdd57);
    background: var(--pico-code-background-color);
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
    font-style: italic;
}
.control-author-note b { font-style: normal; }