/* Стили ПОВЕРХ Bootstrap-вёрстки. Дизайн сохранён из оригинала Toolster.
   Только токены из theme.css — без магических значений по месту. */

body {
    background-color: var(--tls-bg);
    color: var(--tls-text);
    font-family: var(--tls-font-base);
}

/* ---------- Шапка (синяя, как в оригинале) с меню ---------- */
.site-header {
    background-color: var(--tls-header-bg);
    box-shadow: var(--tls-shadow);
}
.header-inner {
    min-height: var(--tls-header-h);
    padding-right: var(--tls-header-px);
}
#logo {
    font-size: var(--tls-logo-fz);
    line-height: var(--tls-header-h);
    color: var(--tls-header-text);
    margin-left: var(--tls-logo-ml);
    text-decoration: none;
}
#logo:hover { color: var(--tls-header-text); }
/* Бургер — главный вход в навигацию на телефоне: зона нажатия во всю высоту шапки и не уже
   --tls-tap-min, чтобы попадать пальцем не целясь. Сама иконка размера не меняет. */
.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tls-tap-min);
    min-height: var(--tls-tap-min);
    color: var(--tls-header-text);
    font-size: var(--tls-burger-fz);
    border: 0;
    padding: 0;
    line-height: 1;
}
.nav-toggle:focus { box-shadow: none; }
/* На мобайле слева стоит бургер (.nav-toggle), поэтому большой десктопный отступ логотипа
   превращается в лишний зазор — рядом с бургером он должен быть маленьким.
   Шапка здесь же подрастает до размера зоны нажатия: иначе кнопка в неё не помещается. */
@media (max-width: 991.98px) {
    :root {
        --tls-logo-ml: .25rem;
        --tls-header-h: var(--tls-tap-min);
    }
}

/* ---------- Горизонтальное меню в шапке (десктоп) ---------- */
.header-nav {
    margin-left: var(--tls-nav-ml);   /* пункты сразу после логотипа, слева */
}
.header-nav .main-nav {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--tls-nav-gap);
}
.header-nav .nav-link {
    display: flex;
    align-items: center;
    height: var(--tls-header-h);
    padding: 0 var(--tls-nav-px);
    font-size: var(--tls-nav-fz);
    line-height: 1;
    white-space: nowrap;
    color: var(--tls-header-text);
    border-bottom: var(--tls-nav-underline) solid transparent;
    transition: background-color var(--tls-transition), border-color var(--tls-transition);
}
.header-nav .nav-link:hover {
    color: var(--tls-on-accent);
    background-color: var(--tls-header-hover);
}
.header-nav .nav-link.active {
    color: var(--tls-on-accent);
    background-color: var(--tls-header-hover);
    border-bottom-color: var(--tls-highlight);
}

/* ---------- Дочерняя категория в меню (categories.php → parent) ----------
   Подкатегорий в архитектуре нет: у такой категории свой URL и свой листинг, и только в НАВИГАЦИИ
   она выкатывается из родителя. На десктопе — выпадающим списком по наведению и с клавиатуры
   (:focus-within, чтобы пункт достигался табом), в мобильном меню — вложенным пунктом со сдвигом. */
.header-nav .nav-item--has-kids { position: relative; }
.header-nav .nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--tls-nav-sub-z);
    display: none;
    min-width: var(--tls-nav-sub-w);
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--tls-nav-sub-bg);
    box-shadow: var(--tls-nav-sub-shadow);
}
.header-nav .nav-item--has-kids:hover > .nav-sub,
.header-nav .nav-item--has-kids:focus-within > .nav-sub { display: block; }
.header-nav .nav-link--sub {
    height: auto;
    padding: var(--tls-nav-sub-py) var(--tls-nav-px);
    border-bottom: 0;
    white-space: nowrap;
}

/* ---------- Корневой пункт меню (include/nav_groups.php) ----------
   Пункт-родитель БЕЗ своей страницы: сам никуда не ведёт, только раскрывает список детей.
   Разметкой это <button>, а не <span>: на планшете наведения нет, и подменю открывается
   единственным доступным способом — фокусом (:focus-within выше), а фокус по тапу получает
   интерактивный элемент. Здесь с кнопки снимается всё кнопочное, чтобы она была неотличима
   от соседних пунктов-ссылок. */
.main-nav .nav-link--group {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: var(--tls-nav-underline) solid transparent;
    /* Типографику задаём ЯВНО, а не `font: inherit`: кнопка наследовала бы шрифт body (16px/24px)
       и стояла бы в шапке крупнее соседних пунктов-ссылок (14px/14px) — замерено 2026-08-20. */
    font-family: inherit;
    font-size: var(--tls-nav-fz);
    font-weight: inherit;
    line-height: 1;
    text-align: left;
    cursor: default;                       /* никуда не ведёт — курсор-палец обманывал бы */
}
.header-nav .nav-link--group { width: auto; }

/* ---------- Мобильное меню (offcanvas) ---------- */
.mobile-nav-list .nav-sub { margin: 0; padding: 0; list-style: none; }
/* Сдвиг + маркер «это вложенный пункт»: в offcanvas выпадашке взяться неоткуда, поэтому дочерняя
   категория просто стоит под родителем с отступом. */
/* В offcanvas дети и так стоят под родителем развёрнутым списком — раскрывать нечего, поэтому
   корневой пункт здесь просто ЗАГОЛОВОК РАЗДЕЛА: не нажимается и оформлен как надпись, а не как
   пункт. Одного приглушения мало — оно читалось как «пункт отключён» (проверено скриншотом). */
.mobile-nav-list .nav-link--group {
    width: 100%;
    pointer-events: none;
    font-size: var(--tls-nav-group-fz);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tls-nav-group-ls);
    opacity: .65;
}
.mobile-nav-list .nav-link--sub { padding-left: var(--tls-nav-sub-indent); }
.mobile-nav-list .nav-link--sub::before {
    content: "";
    display: inline-block;
    width: var(--tls-nav-sub-dash);
    margin-right: .5rem;
    border-top: 1px solid currentColor;
    vertical-align: middle;
    opacity: .55;
}

.mobile-nav { --bs-offcanvas-width: var(--tls-menu-w); background-color: var(--tls-menu-bg); }
.mobile-nav-list .nav-link {
    padding: .7rem 1rem;
    color: var(--tls-menu-text);
    border-bottom: 1px solid var(--tls-border);
}
.mobile-nav-list .nav-link:hover { background-color: var(--tls-menu-hover); color: var(--tls-menu-text); }
.mobile-nav-list .nav-link.active {
    background-color: var(--tls-menu-active);
    color: var(--tls-on-accent);
}

/* ---------- Контент ---------- */
.content-inner { min-width: 0; }
/* Колонка главной. Ширина была инлайн-стилем в шаблоне (style="max-width:600px") — теперь токен. */
.home { max-width: var(--tls-home-max-w); }
.home h1 { font-size: 1.5em; font-weight: bold; margin: 6px 0 .83em; }
.home .tools a { color: var(--tls-link-home); }

/* ---------- Листинг-карточки инструментов (дизайн оригинала: скрин на белом + синяя подпись) ----------
   Используются на страницах категорий и в блоке related («See also»). Скрин — instruments/<slug>/listing/card.png. */
.tool-items { gap: var(--tls-item-gap); }
.tool-item {
    width: var(--tls-item-w);
    background-color: var(--tls-item-bg);
    border-radius: var(--tls-item-radius);
    box-shadow: var(--tls-item-shadow);
    overflow: hidden;
    color: var(--tls-on-accent);
}
.tool-item:hover { background-color: var(--tls-item-hover); color: var(--tls-on-highlight); }
.tool-item-shot {
    background-color: var(--tls-surface);
    border-bottom: 1px solid var(--tls-item-shot-border);
    padding: 12px 8px 6px; /* оригинал: 7px margin + 5px сверху, 1px снизу */
    text-align: center;
}
.tool-item-shot img {
    width: var(--tls-item-shot-w);
    max-width: 100%;
    height: auto; /* пропорция задана атрибутами width/height (182×123) */
}
/* Инструмент без скрина (запасной случай): белая зона держит те же пропорции, карточка не схлопывается */
.tool-item-shot-ph {
    width: var(--tls-item-shot-w);
    max-width: 100%;
    aspect-ratio: var(--tls-item-shot-ar);
    margin: 0 auto;
}
.tool-item-title {
    min-height: var(--tls-item-title-minh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: var(--tls-item-title-fz);
    letter-spacing: 1px;
    line-height: 1.2;
    padding: 6px 8px;
}
/* Мобайл: две карточки в ряд, скрин ужимается пропорционально */
@media (max-width: 575.98px) {
    .tool-item { width: calc(50% - var(--tls-item-gap) / 2); }
    .tool-item-title { font-size: calc(var(--tls-item-title-fz) - 3px); min-height: calc(var(--tls-item-title-minh) - 8px); }
}
/* Колонка страницы инструмента: ширина = «окно приложения» (manifest layout.width → --tls-tool-w),
   но НЕ уже минималки --tls-tool-min-w (иначе у узких инструментов текст описания и карточки related
   сжимаются в неудобную колонку). Всё на странице — инструмент, его описание и «See also» — стоит в этой
   колонке, поэтому левый край у блоков общий. Без layout.width колонка занимает всю ширину контента. */
.tool-page {
    max-width: min(100%, max(var(--tls-tool-w, 100%), var(--tls-tool-min-w)));
    margin-inline: auto;
}
/* Скролла у сцены НЕТ: колонка теперь ровно по ширине инструмента, а bootstrap-строки (.row) имеют
   отрицательные внешние отступы (−8px) — при overflow-x:auto они рисовали горизонтальный скроллбар,
   похожий на «прогресс-бар» под инструментом. Отступы просто выходят за границы, ничего не обрезая. */
.tool-stage { max-width: 100%; }

/* ---------- Рекламный блок над рабочей областью ---------- */
/* Место резервируется ЗАРАНЕЕ: объявление подъезжает уже после отрисовки страницы и без резерва
   столкнуло бы инструмент вниз прямо под руками у человека (скачок вёрстки, CLS).
   Высота НЕ обрезается (никаких overflow:hidden): урезанное объявление — нарушение правил рекламной
   сети. Плоским блок делают форматом в самом коде объявления (site_config: ads.slot_tool_top,
   `horizontal`) — сеть тогда присылает только низкие баннеры, и резерв ниже им точно по росту. */
.ad-slot--tool_top { min-height: var(--tls-ad-top-h-sm); }
@media (min-width: 768px) {
    .ad-slot--tool_top { min-height: var(--tls-ad-top-h); }
}
/* Объявления не нашлось (сеть помечает блок `unfilled`) — резерв снимаем, иначе над инструментом
   осталась бы пустая полоса в сотню пикселей неизвестно зачем. */
.ad-slot--tool_top:has(> ins[data-ad-status="unfilled"]) {
    min-height: 0;
    margin-block: 0;
}

/* Выход из блока «See also» в свою категорию — виден на любом экране (хлебные крошки на мобайле
   скрыты, и уйти из инструмента «на этаж выше» было некуда). */
.related-more { font-size: var(--tls-related-more-fz); }

/* ---------- Текст под инструментом: что это, как пользоваться, вопросы-ответы ---------- */
.tool-info { color: var(--tls-text); }
.tool-info__block + .tool-info__block { margin-top: 1.75rem; }
.tool-info h2 { margin-bottom: .75rem; }
.tool-info p { margin-bottom: .75rem; }
.tool-info__steps { padding-left: 1.25rem; }
.tool-info__steps li { margin-bottom: .5rem; }
.tool-info__q {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

/* ---------- Статические страницы (Terms, Privacy, FAQ, Sitemap, формы) ---------- */
.static-page {
    max-width: var(--tls-text-max-w);
    margin-inline: auto;
}
.static-page h1 { margin-bottom: 1rem; }
.static-page__list li { margin-bottom: .75rem; }
.contact-form { max-width: var(--tls-form-max-w); }
/* Ловушка для ботов: поле есть в разметке, но человеку не показывается. Класс ОДИН на все формы
   сайта (обратная связь и «улучшить инструмент») — раньше правило было скопировано дважды. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Заголовок страницы инструмента: H1 + подводка (рисует движок, не инструмент) ---------- */
.tool-head {
    max-width: var(--tls-text-max-w);
    margin: 0 auto 1.25rem;
    text-align: center;
}
.tool-head h1 { margin-bottom: .35rem; }
/* Сабтайтл: у клавиатур — «<родное название> · <вариант>». Родная часть набрана письмом языка,
   поэтому строка живёт своим шрифтом системы и не должна конкурировать с H1 по весу. */
.tool-head__subtitle {
    color: var(--tls-text-muted);
    margin: 0 auto .35rem;
    max-width: var(--tls-lead-max-w);
    font-size: .95rem;
}
/* Сабтайтл ВНУТРИ H1 (манифест `subtitle_in_h1`): в разметке он часть заголовка — поисковик читает
   «Type Spanish accents without a Spanish keyboard» одной фразой, — но на экране стоит строкой ПОД
   главной частью, мельче и курсивом, чтобы не спорить с ней (решение владельца 2026-08-06). */
.tool-head__h1-main { display: block; }
.tool-head__h1-sub {
    display: block;
    margin-top: .2rem;
    font-size: .55em;
    font-weight: 400;
    font-style: italic;
    color: var(--tls-text-muted);
}

.tool-head__lead {
    color: var(--tls-text-muted);
    margin: 0 auto;
    max-width: var(--tls-lead-max-w);
}

/* Строка действий под инструментом: слева установка приложения, справа «Improve this tool».
   Ссылку прижимает вправо margin-left:auto, а не justify-content: без установки (у большинства
   инструментов её нет) в строке остаётся один элемент, и space-between увёл бы его влево. */
.tool-actions {
    margin-top: 1.25rem;
    gap: .5rem;
}
.tool-actions > .tool-suggest {
    margin-top: 0;
    margin-left: auto;
}

/* Кнопка «Install as app» и значок подсказки рядом (templates/partials/pwa_install.php).
   Разметка приходит скрытой и показывается только тем, кому установка реально доступна. */
.pwa-install {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    /* Вертикальная доводка относительно ссылки напротив — здесь и только целым блоком.
       Отступом, а не transform: так же, как это подобрал владелец в браузере. */
    margin-top: var(--tls-pwa-shift);
}
/* display:inline-flex сильнее атрибута hidden — без этой строки скрытый блок был бы виден. */
.pwa-install[hidden] { display: none; }
/* Кнопка стоит в одной строке со ссылкой «Improve this tool» и обязана быть с ней одного цвета:
   бутстраповский primary (#0d6efd) рядом с нашим акцентом (--tls-accent) выглядел чужим и бил в
   глаза. Красим и рамку, и текст, и значок (он наследует currentColor) одним токеном. */
.pwa-install__btn {
    /* Мини-кнопка: размер шрифта и значка — как у ссылки напротив, отступы минимальные.
       Решение владельца 2026-08-16: btn-sm в этой строке выглядел крупным.
       inline-flex + gap — не украшательство: у обычной кнопки перенос строки между значком и
       подписью в разметке превращается в ПРОБЕЛ и добавляет к зазору лишние 3,3 px (замерено),
       из-за чего надпись отходила от значка дальше, чем у ссылки. Во flex-раскладке пробелы между
       элементами не считаются, и зазор задаётся ровно одним токеном — тем же, что справа. */
    display: inline-flex;
    align-items: center;
    gap: var(--tls-suggest-ic-gap);
    --bs-btn-font-size: var(--tls-pwa-btn-fz);
    --bs-btn-padding-y: var(--tls-pwa-btn-py);
    --bs-btn-padding-x: var(--tls-pwa-btn-px);
    --bs-btn-border-radius: var(--tls-pwa-btn-radius);
    --bs-btn-color: var(--tls-accent);
    --bs-btn-border-color: var(--tls-accent);
    --bs-btn-hover-color: var(--tls-on-accent);
    --bs-btn-hover-bg: var(--tls-accent);
    --bs-btn-hover-border-color: var(--tls-accent);
    --bs-btn-active-color: var(--tls-on-accent);
    --bs-btn-active-bg: var(--tls-accent-dark);
    --bs-btn-active-border-color: var(--tls-accent-dark);
}
/* Значок телефона внутри кнопки: только размер, БЕЗ вертикальных сдвигов. Правило владельца
   2026-08-16 — «если двигаешь по вертикали, то только всю кнопку»: значок часть кнопки и стоит
   в ней ровно по центру, иначе кнопка выглядит собранной из чужих деталей. Понадобится доводка
   относительно ссылки напротив — двигается кнопка целиком через --tls-pwa-btn-shift. */
.pwa-install__btn .bi {
    display: inline-block;
    font-size: var(--tls-pwa-btn-ic-fz);
    line-height: 1;
}
/* Индикатор ожидания внутри кнопки занимает место значка — ровно тот же размер, иначе кнопка
   меняет ширину в момент подмены и строка действий дёргается. */
.pwa-install__btn .spinner-border {
    width: var(--tls-pwa-btn-ic-fz);
    height: var(--tls-pwa-btn-ic-fz);
    border-width: .12em;
}
/* ПЛАШКА УСТАНОВКИ (класс ставит JS на время ожидания, только на телефоне — на компьютере
   собирать нечего и пояснения нет). Блок перестаёт быть строкой действий и становится ОДНИМ
   сообщением: индикатор с надписью и пояснение лежат на общей подложке, поэтому видно, что
   пояснение относится именно к установке, а не к инструменту. Ширина ограничена сверху —
   пояснение переносится в две-три строки, а не растягивается на всю колонку. */
.pwa-install.is-installing {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: var(--tls-pwa-panel-w);
    margin-top: 0;                 /* доводка кнопки по соседней ссылке плашке не нужна */
    padding: var(--tls-pwa-panel-py) var(--tls-pwa-panel-px);
    border-left: var(--tls-pwa-panel-bar) solid var(--tls-highlight);
    border-radius: var(--tls-pwa-panel-radius);
    background: var(--tls-pwa-panel-bg);
}
/* Установка ПОДТВЕРЖДЕНА телефоном — плашка целиком становится зелёной, заодно с галочкой внутри.
   Красится только подтверждение: «наверное, скоро появится» зелёного не заслуживает. */
.pwa-install.is-installing.is-ok {
    border-left-color: var(--tls-success);
    background: var(--tls-pwa-panel-ok-bg);
}
/* Ярлык, который телефон поставил на домашний экран: значок и подпись под ним — как на самом
   экране. Стоит третьей строкой плашки, рядом с подсказкой «Look for this icon». Показывается
   только по ПОДТВЕРЖДЁННОЙ установке (класс снимает JS), потому что раньше показывать нечего. */
.pwa-install__found {
    /* Подсказка строкой, значок под ней — и то и другое прижато влево: значок, поставленный сбоку
       от текста, повисал посреди плашки и читался как случайная картинка, а не как ответ на вопрос
       «что искать». */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    width: 100%;
    margin-top: var(--tls-pwa-panel-gap);
    font-size: var(--tls-pwa-btn-fz);
    color: var(--tls-text-muted);
}
.pwa-install__found-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: var(--tls-pwa-shortcut-w);
}
.pwa-install__found-icon {
    width: var(--tls-pwa-shortcut-size);
    height: var(--tls-pwa-shortcut-size);
    border-radius: var(--tls-pwa-shortcut-radius);
    box-shadow: var(--tls-pwa-shortcut-shadow);
}
/* Подпись — как под иконкой на телефоне: мелко, по центру, тем же цветом, что основной текст. */
.pwa-install__found-name {
    font-size: var(--tls-pwa-shortcut-fz);
    line-height: 1.2;
    text-align: center;
    color: var(--tls-text);
}
/* Пояснение на время установки: вторая строка внутри плашки (width:100% переносит его под статус). */
.pwa-install-note {
    width: 100%;
    margin: var(--tls-pwa-panel-gap) 0 0;
    color: var(--tls-text-muted);
    font-size: var(--tls-pwa-btn-fz);
}
.pwa-install__help {
    --bs-btn-color: var(--tls-text-muted);
    --bs-btn-hover-color: var(--tls-accent);
    --bs-btn-font-size: var(--tls-pwa-btn-ic-fz);
    display: inline-flex;
    align-items: center;
    padding: .15rem .25rem;
    line-height: 1;
    text-decoration: none;
}
/* Строка «идёт установка» стоит на месте кнопки и обязана быть того же размера, иначе строка
   действий прыгает в размерах на глазах у человека. */
.pwa-install__progress {
    display: inline-flex;
    align-items: center;
    font-size: var(--tls-pwa-btn-fz);
}
/* Внутри плашки статус — её заголовок: он главнее пояснения под ним, иначе две одинаковые серые
   строки читаются как один сплошной текст и непонятно, что здесь происходит прямо сейчас. */
.pwa-install.is-installing .pwa-install__progress {
    font-weight: 600;
}
/* Индикатор — по кеглю строки (1em), иначе он крупнее собственной надписи и перетягивает взгляд. */
.pwa-install__progress .spinner-border {
    width: 1em;
    height: 1em;
    border-width: .12em;
    margin-right: var(--tls-suggest-ic-gap);
}
/* Галочка встаёт РОВНО на место индикатора: тот же кегль и тот же зазор, иначе строка дёргается
   в момент подмены. */
.pwa-install__progress [data-role="ok"] {
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    margin-right: var(--tls-suggest-ic-gap);
}
/* Подтверждённая установка — зелёным. Красим только этот случай: «наверное, скоро появится»
   зелёным быть не имеет права, иначе цвет перестаёт что-либо значить. */
.pwa-install__progress.is-done {
    color: var(--tls-success);
}
/* Шаги инструкции: иконка шага не должна съезжать от текста при переносе строки. */
.pwa-help-steps li {
    margin-bottom: .5rem;
}
.pwa-help-steps i {
    margin-right: .35rem;
}

/* ---------- Блок «How it works» под инструментом (общий для всех инструментов) ---------- */
.tool-explain {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    background-color: var(--tls-surface);
    border: 1px solid var(--tls-border);
    border-radius: var(--tls-radius);
}
.tool-explain__block {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}
/* Второй и следующие блоки отделяются линией — как было у многоблочных объяснений bit-чекеров. */
.tool-explain__block + .tool-explain__block {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--tls-border);
}
.tool-explain__ic {
    flex: 0 0 auto;
    color: var(--tls-accent);
    font-size: var(--tls-explain-ic-fz);
    line-height: 1.35;
}
.tool-explain__title {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tls-text);
}
.tool-explain__text {
    margin: 0;
    color: var(--tls-text-muted);
}
.tool-explain__items {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
    color: var(--tls-text-muted);
}

/* ---------- Предложение по инструменту (ссылка под инструментом + модалка) ---------- */
.tool-suggest { margin-top: 1.25rem; }
.tool-suggest__link {
    --bs-btn-color: var(--tls-accent);
    --bs-btn-hover-color: var(--tls-accent-dark);
    --bs-btn-active-color: var(--tls-accent-dark);
    display: inline-flex;
    align-items: center;
    gap: var(--tls-suggest-ic-gap);
    /* справа отступа нет: текст ссылки встаёт ровно по правому краю колонки инструмента */
    padding: .25rem 0 .25rem .5rem;
    font-size: var(--tls-suggest-fz);
    line-height: 1;
    text-decoration: underline;
}
.tool-suggest__link .bi {
    display: inline-block;
    font-size: var(--tls-suggest-ic-fz);
    line-height: 1;
    transform: translateY(var(--tls-suggest-ic-shift));
}
/* Сам ГЛИФ Bootstrap Icons рисуется в ::before и по умолчанию сидит на vertical-align: -.125em —
   из-за этого облачко уезжает вверх. Значение подобрал владелец в браузере. */
.tool-suggest__link .bi::before { vertical-align: var(--tls-suggest-ic-align); }
.tool-suggest-form__intro,
.tool-suggest-thanks__text { color: var(--tls-text-muted); }
.tool-suggest-thanks__icon {
    display: block;
    margin-bottom: .5rem;
    font-size: var(--tls-thanks-ic-fz);
    color: var(--tls-accent);
}
/* ---------- Футер (Bootstrap grid + наши стили) ---------- */
.site-footer {
    border-top: 1px solid var(--tls-border);
    background-color: var(--tls-surface);
}
.footer-title { font-weight: 700; color: var(--tls-text); }
.site-footer a { color: var(--tls-text); text-decoration: none; }
.site-footer a:hover { color: var(--tls-accent); }

/* ---------- Кнопки в фирменном синем ---------- */
.btn-primary {
    --bs-btn-bg: var(--tls-accent);
    --bs-btn-border-color: var(--tls-accent);
    --bs-btn-hover-bg: var(--tls-accent-dark);
    --bs-btn-hover-border-color: var(--tls-accent-dark);
}


/* ---------- Полоса разработчика (только локалка, templates/partials/devbar.php) ---------- */
/* Кричащая, прижата к низу окна: сообщает, что обфускат не пересобрался и в браузере старый JS. */
.tls-devbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;                       /* выше модалок Bootstrap (1055) */
    padding: .6rem 1rem;
    background: var(--tls-danger);
    color: var(--tls-on-accent);
    font-size: .85rem;
    line-height: 1.35;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .3);
}
.tls-devbar ul { margin: .25rem 0; padding-left: 1.2rem; }
.tls-devbar code { color: var(--tls-highlight); }

/* ---------- Снимки инструмента в тексте (у клавиатур — обе грани) ---------- */
.tool-shots { margin-top: 1.75rem; }
.tool-shots__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
/* Картинки МАЛЕНЬКИЕ и подписанные: это иллюстрация в статье, а не рабочая клавиатура —
   иначе юзер тычет в скрин и не понимает, почему тот не печатает (владелец, 2026-07-30).
   Настоящий инструмент стоит выше на той же странице. */
.tool-shots__item {
    margin: 0;
    flex: 0 1 var(--tls-shot-w);
    max-width: var(--tls-shot-w);
}
/* Телефонная грань узкая, десктопная широкая — обе живут по своей ширине, но не шире колонки. */
.tool-shots__item img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--tls-border);
    border-radius: var(--tls-radius);
    background-color: var(--tls-surface);
}
.tool-shots__item figcaption {
    color: var(--tls-text-muted);
    font-size: .875rem;
    margin-top: .35rem;
}