/* СТИЛИ КОКПИТА: раскладка, ряд ответов, лента, кейс.
   ВЫНЕСЕНО ИЗ index.html 31.08.2026 вместе с разделением по этапам: разметка
   отдельно, стили отдельно, скрипт каждого этапа отдельно. */
  * { box-sizing: border-box; }
  body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
  /* ── ПРОКРУТКА, КОТОРАЯ НЕ ДВИГАЕТ СОДЕРЖИМОЕ ────────────────────────────────────
     `scrollbar-gutter: stable` держит место под полосу ВСЕГДА — и когда прокручивать
     нечего. Без него полоса появляется вместе с переполнением, отъедает свою ширину у
     содержимого, и весь столбец дёргается влево ровно в тот момент, когда в него что-то
     добавили: пользователь видит скачок там, где ждал прибавления строки.
     ДВЕ ДОРОГИ, НО НЕ ОДНОВРЕМЕННО — И ЭТО НЕ АККУРАТНОСТЬ. Объявленные рядом,
     `scrollbar-width` и `::-webkit-scrollbar` не складываются: в нынешнем Chrome стандартное
     свойство ПЕРЕБИВАЕТ псевдоэлементы целиком. Замерено 25.08.2026 — полоса выходила 10 px
     ВМЕСТЕ СО СТРЕЛКОЙ внизу, хотя рядом стояли и `width: 6px`, и снятые кнопки: правила были
     написаны и не работали. Поэтому стандартные свойства убраны под `@supports not
     selector(::-webkit-scrollbar)` — их видит только тот, у кого псевдоэлементов нет
     (Firefox), а Chrome идёт по webkit-дороге и рисует 6 px без стрелок. */
  .ck-skroll { scrollbar-gutter: stable; }
  /* ЦЕЛЬ НАЖАТИЯ РАСТЁТ, ЗНАЧОК — НЕТ. Приём S2: увеличить сам значок было бы проще и
     хуже — оценка перестала бы быть служебной мелочью и полезла бы в глаза рядом с
     ответом. Между двумя целями нужен зазор, иначе увеличенные области перекроются. */
  @media (pointer: coarse) {
    .ck-ocenka .mark-btn { position: relative; }
    .ck-ocenka .mark-btn::after { content:''; position:absolute; top:50%; left:50%;
      width:40px; height:40px; transform:translate(-50%,-50%); }
    .ck-ocenka { gap: 8px !important; }
  }
  /* ═══ ПОЛОСА ПРОКРУТКИ — ОДНА НА ВСЮ ФОРМУ, А НЕ У ОДНОГО КЛАССА ═══════════════
     Правила ниже были написаны для `.ck-skroll`, а класс этот стоит на ДВУХ узлах из пяти
     прокручиваемых. Остальные три — панель «Утверждение задач», кейс, попап — рисовались
     системной полосой со стрелками: правило существовало и на них не действовало. Замерено
     07.09.2026 по разметке: `overflow-y:auto` пять раз, `class="ck-skroll"` два.
     Слово оператора: «на всей экранной форме, на всех шагах». Значит и селектор общий.
     ТОНЬШЕ (4 px вместо 6) — тоже его слово. Ползунок при этом остаётся видимым: цвет
     не меняли, а скруглённая полоска в 4 px читается — проверено на снимке. */
  *::-webkit-scrollbar { width: 4px; height: 4px; }
  *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: rgba(36,31,26,.20); border-radius: 999px; }
  *::-webkit-scrollbar-thumb:hover { background: rgba(36,31,26,.34); }
  .ck-skroll::-webkit-scrollbar { width: 4px; }
  /* СТРЕЛОК НЕТ. Chrome рисует их у полосы по умолчанию, и стиль ползунка их не убирает:
     кнопки — отдельный псевдоэлемент. */
  .ck-skroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .ck-skroll::-webkit-scrollbar-track { background: transparent; }
  .ck-skroll::-webkit-scrollbar-thumb { background: rgba(36,31,26,.20); border-radius: 999px; }
  .ck-skroll::-webkit-scrollbar-thumb:hover { background: rgba(36,31,26,.34); }
  @supports not selector(::-webkit-scrollbar) {
    /* Firefox идёт сюда: у него псевдоэлементов нет, и «тонко» он считает сам. */
    .ck-skroll, * { scrollbar-width: thin; scrollbar-color: rgba(36,31,26,.20) transparent; }
  }
  /* ПЕРЕЛИВАНИЕ — БЛИК, ИДУЩИЙ ПО КНОПКЕ, а не мигание прозрачностью: мигающая кнопка
     читается как «гаснет», то есть как неисправность, а блик — как приглашение. */
  /* КНОПКА ЗОВЁТ — ТОЛЬКО ПУЛЬСОМ. Здесь был ещё перелив (`ckБлик`): светлая полоса ехала
     поперёк кнопки, и на каждом кадре, кроме крайних, она стояла у неё посередине —
     читалась не как движение, а как черта на кнопке. Снят целиком вместе с фоном-градиентом:
     кольцо расходится и гаснет, этого достаточно, а два зова разом спорят друг с другом. */
  .ck-zovyot {
    animation: ckПульс 2.1s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(241,90,52,.45);
  }
  /* Кольцо расходится и гаснет. Одно на ОБА экрана: «кнопка зовёт» — одно состояние, и
     двух разных его изображений на соседних экранах быть не должно. */
  @keyframes ckПульс {
    0%   { box-shadow: 0 0 0 0   rgba(241,90,52,.45); }
    70%  { box-shadow: 0 0 0 11px rgba(241,90,52,0); }
    100% { box-shadow: 0 0 0 0   rgba(241,90,52,0); }
  }
  @media (prefers-reduced-motion: reduce) { .ck-zovyot { animation: none; } }
  /* ЗОВ НА СТРОКЕ — ПУЛЬСИРУЮТ БУКВЫ, А НЕ РАМКА (решение оператора 01.09.2026).
     Кольцо вокруг строки говорит «эта СТРОКА», а строка во всю ширину столбца — крупный
     предмет: глаз ловит прямоугольник и ищет, что в нём. Пульсация самих букв называет
     ровно то, ради чего зов и нужен, — СЛОВО.

     ЦВЕТ, А НЕ ЯРКОСТЬ. Мигание прозрачностью читается как «гаснет», то есть как поломка;
     переход в акцентный цвет — как «смотри сюда». Такт тот же, 2.1 с, что у кольца: это
     одно и то же состояние, и разводить их по времени было бы враньём.

     МАРКЕР СТРОКИ НЕ ПУЛЬСИРУЕТ: у него свой цвет, и он не наследует. Так и надо —
     пульсируют буквы, а не вся строка целиком.

     КОЛЬЦО ОСТАЛОСЬ ТАМ, ГДЕ ПРЕДМЕТ — КНОПКА. `ck-zovyot` висит и на баблах отраслей, и
     на «Дальше»: у неё белый текст на оранжевом, и пульсация цветом там нечитаема. Значит
     правило теперь называется по ПРЕДМЕТУ, а не по экрану: кнопка зовёт кольцом, строка
     списка — буквами. */
  /* ЗАМЕТНЕЕ · 05.09.2026, просьба оператора. Что именно усилено и почему так:
     1) АКЦЕНТ ДЕРЖИТСЯ ПЛАТО, а не проходится точкой. Было `50% { }` — оранжевый жил один
        кадр из всего такта, и глаз ловил его, только если смотрел ровно туда. Стало
        `40%,60%` — пятая часть такта на полном акценте.
     2) СВЕЧЕНИЕ НА САМИХ БУКВАХ (`text-shadow`), а не заливка и не обводка. Первая
        редакция повесила фон и кольцо — и `check-zov-formata` покраснел по делу: у строки
        объявлено, что зовёт СЛОВО, а не прямоугольник. Строка идёт во всю ширину столбца,
        и рамка вокруг неё называет столбец, а не слово. Свечение держится глифов.
     3) НАЧЕРТАНИЕ УСИЛЕНО СТАТИЧНО, а не в такт. Анимировать `font-weight` значит менять
        ширину текста каждый такт: строка дёргалась бы, и это читалось бы как поломка.
     ТАКТ 2.1 с НЕ ТРОНУТ. Он общий с кольцом, «+», подсказкой и предупреждением о целях —
     это одно состояние, и развести их по времени значило бы соврать, что состояний много. */
  .ck-zovyot-stroka {
    animation: ckБуквыЗовут 2.1s ease-in-out infinite;
    font-weight: 700;
  }
  @keyframes ckБуквыЗовут {
    0%, 100% { color: #241F1A; text-shadow: 0 0 0 rgba(241,90,52,0); }
    40%, 60% { color: #F15A34; text-shadow: 0 0 7px rgba(241,90,52,.45); }
  }
  /* «+» ЗОВЁТ ВМЕСТЕ СО СВОЕЙ СТРОКОЙ. Он не внутри неё, а рядом — сосед по ряду, — и
     цвет от строки к нему не наследуется. Оставить его тихим значило бы позвать в корзину
     и промолчать о двери, через которую в неё входят.
     ДВИЖЕТСЯ И КОНТУР, И ЗНАК: у кружка свой цвет рамки, и один знак без рамки читался бы
     как опечатка, а не как зов. */
  /* «+» ДЕРЖИТ АКЦЕНТ ТЕМ ЖЕ ПЛАТО И В ТУ ЖЕ ФАЗУ, что и строка. Разойдись они — на
     экране было бы два разных мигания рядом, то есть два состояния вместо одного. */
  .ck-zovyot-stroka + .ck-answer-plus { animation: ckПлюсЗовёт 2.1s ease-in-out infinite; }
  @keyframes ckПлюсЗовёт {
    0%, 100% { color: #8A8073; border-color: rgba(36,31,26,.22); }
    40%, 60% { color: #F15A34; border-color: #F15A34; }
  }
  /* БЕЗ ДВИЖЕНИЯ — ТО ЖЕ УСИЛЕНИЕ, НО СТАТИКОЙ. Человеку, попросившему не двигать, нужен
     тот же признак: иначе усиление досталось бы только тем, кто движение терпит. */
  @media (prefers-reduced-motion: reduce) {
    .ck-zovyot-stroka { animation: none; color: #F15A34;
                        text-shadow: 0 0 7px rgba(241,90,52,.45); }
    .ck-zovyot-stroka + .ck-answer-plus { animation: none; color: #F15A34;
                        border-color: #F15A34; }
  }
  /* ── МНОГО ЦЕЛЕЙ: ПРЕДУПРЕЖДЕНИЕ НАД ПОЛЕМ ───────────────────────────────────
     ПУЛЬСИРУЮТ БУКВЫ, тем же тактом и той же фазой, что и зов: «смотри сюда» — одно
     состояние, и двух его изображений на экране быть не должно. Разведены не движением,
     а ЦВЕТОМ: зов зовёт акцентом, предупреждение — тёплым янтарным. Оно не запрещает
     и не ошибка; красным его красить значило бы соврать о цене выбора.

     БЕЗ РАМКИ И ЗАЛИВКИ: это реплика к тому, что человек уже набрал, а не отдельная
     карточка, требующая ответа. */
  .ck-celi-mnogo {
    margin: 0 0 8px; padding: 2px 4px; font-size: 12.5px; line-height: 1.45;
    text-align: center; letter-spacing: .01em; pointer-events: none;
    animation: ckМногоЦелей 2.1s ease-in-out infinite;
  }
  @keyframes ckМногоЦелей {
    0%, 100% { color: #8A7F72; }
    50%      { color: #B8791F; }
  }
  @media (prefers-reduced-motion: reduce) { .ck-celi-mnogo { animation: none; color: #B8791F; } }

  /* ── НАПОМИНАНИЕ О СВОБОДНОМ ВВОДЕ ────────────────────────────────────────────
     НЕ КНОПКА, И ЭТО ВИДНО ДО НАЖАТИЯ. Ни рамки, ни заливки, ни курсора-руки; текст
     приглушён до цвета подписи. Похожая на кнопку строка, которая не нажимается,
     читается как поломка.

     `pointer-events:none` СНИМАЕТ САМУ ВОЗМОЖНОСТЬ. Одного вида мало: без него строку
     можно выделить, перетащить и получить фокус табом — то есть потрогать.

     СТРЕЛКА КАЧАЕТСЯ ВНИЗ, К ПОЛЮ: она показывает, КУДА писать. */
  .ck-napominanie {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 10px 0 2px; padding: 2px 4px;
    font-size: 12.5px; line-height: 1.2; color: #8A7F72; letter-spacing: .01em;
    pointer-events: none; user-select: none;
  }
  .ck-napominanie-strelka {
    display: inline-flex; width: 14px; height: 14px; color: #C9BCA8;
    animation: ckКачнутьВниз 1.8s ease-in-out infinite;
  }
  @keyframes ckКачнутьВниз {
    0%, 70%, 100% { transform: translateY(0);   opacity: .75; }
    35%           { transform: translateY(4px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .ck-napominanie-strelka { animation: none; } }

  /* ── ОТКАЗ В ЦЕЛИ ────────────────────────────────────────────────────────────
     СТРОКА ВЕДУЩЕГО намеренно не похожа на ответ: пунктир, мелко, приглушённо.
     ПУЛЬСАЦИЯ НА НЕЙ — та же `ck-zovyot-stroka`, что у зова: одно состояние, одно
     изображение. */
  .ck-otkaz-stroka {
    display: block; width: 100%; margin: 12px 0 2px; padding: 7px 12px;
    border: 1px dashed rgba(36,31,26,.20); border-radius: 10px; background: transparent;
    font: inherit; font-size: 11.5px; letter-spacing: .02em; color: #8A7F72;
    text-align: left; cursor: pointer; transition: background .16s, color .16s;
  }
  .ck-otkaz-stroka:hover { background: rgba(36,31,26,.05); color: #241F1A }

  /* ПОПАП ОГРАНИЧЕН ПО ВЫСОТЕ И ПРОКРУЧИВАЕТСЯ ВНУТРИ СЕБЯ: сто маркеров не имеют права
     растягивать страницу — вопрос, ради которого экран открыт, уехал бы вверх. */
  .ck-otkaz-popap {
    position: fixed; z-index: 60; max-height: 58vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; padding: 14px 16px 12px;
    box-shadow: 0 18px 44px rgba(36,31,26,.20); border: 1px solid rgba(36,31,26,.10);
    font-size: 12px; line-height: 1.5; color: #6B6259;
  }
  /* `min-height: 0` — НЕ УКРАШЕНИЕ. В колоночном флексе у элемента по умолчанию
     `min-height: auto`: он отказывается сжиматься ниже содержимого, и `max-height`
     на родителе не держит — попап вырастал во весь список и уезжал за нижний край. */
  .ck-otkaz-telo { flex: 1 1 auto; min-height: 0; overflow-y: auto;
                   overscroll-behavior: contain; padding-right: 4px }
  .ck-otkaz-shapka { flex: 0 0 auto; font-weight: 800; letter-spacing: .04em; color: #8A7F72;
                     text-transform: uppercase; font-size: 10.5px; margin-bottom: 10px }
  .ck-otkaz-razdel { font-weight: 700; color: #241F1A; margin-top: 10px }
  .ck-otkaz-razdel.propusk { color: #2F7A4F }
  .ck-otkaz-marker { color: #8A7F72 }
  .ck-otkaz-otvet { flex: 0 0 auto; margin-top: 10px; padding-top: 8px;
                    border-top: 1px solid rgba(36,31,26,.12); color: #241F1A }

  /* КНОПКА ОТПРАВКИ ПРИ ОТКАЗЕ: гаснет, но остаётся нажимаемой — нажатие показывает хинт.
     Отключённая наглухо кнопка молчит, и человек не узнаёт, что случилось. */
  .ck-nelzya { opacity: .45; filter: grayscale(.6) }
  .ck-otkaz-hint {
    position: fixed; z-index: 70; padding: 10px 13px; border-radius: 12px;
    background: #241F1A; color: #FDF6EC; font-size: 12.5px; line-height: 1.45;
    box-shadow: 0 10px 26px rgba(36,31,26,.28); pointer-events: none;
    animation: ckfade .16s ease-out;
  }
  @keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
  @keyframes ckfade { from { opacity: 0; } to { opacity: 1; } }
  /* острые углы: всё скругление → 3px, кроме кругов (border-radius:50%) — форма, кнопки, баблы, тэги, карточки, рамки */
  [style*="border-radius"]:not([style*="border-radius: 50%"]):not([style*="border-radius:50%"]) { border-radius: 3px !important; }
  /* Иконки (вшиты, см. CK_ICONS): размер = font-size контекста (1em), цвет = currentColor */
  [data-lucide], svg.lucide { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; stroke-width: 2; }
  /* Рантаймовый гейт иконок: имени нет во вшитом наборе → ЗАМЕТНАЯ метка, а не пустое место.
     Обводка нужна поверх залитого квадрата: на мелком кегле один квадрат читается как глиф. */
  svg.ck-icon-missing { outline: 2px solid #D8431F; outline-offset: 1px; }
  /* ── ПОДСКАЗКИ НА РАСПАКОВКЕ (см. renderHints). Тихое предложение, а не призыв: светлая
        пилюля с тонкой обводкой, коралл — ТОЛЬКО на наведении, иначе перебивает реплику бота,
        под которой стоит. Вид и размеры взяты у соседних пилюль чата, скругление сажает общее
        правило острых углов выше — своего здесь ничего не заведено, кроме раскладки.
        Наведение приходится ставить классом с !important: цвета у пилюли инлайновые, как у соседей.
        Узкий экран — СТОЛБИК: три пилюли в строку на телефоне нечитаемы.
        Текст ПЕРЕНОСИТСЯ, а не режется: обрезанную подсказку нельзя прочесть, а значит и выбрать. */
  /* ── СПИСОК ОТВЕТОВ. Столбец, один пункт в строку, без корпуса: наши варианты — ФРАЗЫ,
        а таблетка придумана под короткое слово. Шесть фраз в ряду с переносом давали четыре
        неровных ряда (замерено: 171 px, кнопка 37×229), у которых нет порядка чтения: где
        кончается строка, решала ширина слов. На узком экране ряд и так превращался в столбец —
        теперь он столбец везде, и правило `max-width: 640px` больше не нужно.
        НАЖИМАЕТСЯ ВСЯ СТРОКА: у голого текста цель была бы вдвое меньше прежней таблетки.
        ЦВЕТ: текст чернильный, маркер приглушённый, акцент — только наведению и выбранному.
        Шесть оранжевых фраз подряд перекричали бы и полосу набранного, и кнопку отправки. */
  .ck-answers { display: flex; flex-direction: column; gap: 1px; align-items: stretch; }
  .ck-answer { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
               border: none; background: transparent; color: #241F1A; font-family: inherit;
               font-weight: 600; font-size: 12px; line-height: 1.45; padding: 8px 12px 8px 8px;
               border-radius: 10px; cursor: pointer; transition: background .14s, color .14s; }
  .ck-answer:hover, .ck-answer:focus-visible { background: rgba(255,255,255,.62); color: #F15A34; }
  /* ═══ СТРОКА КОРЗИНЫ НЕ НАЖИМАЕТСЯ ═══════════════════════════════════════════
     Действие переехало на значок, и строка обязана перестать выглядеть кнопкой: рука на
     курсоре и подсветка при наведении обещали бы нажатие, которого больше нет. Наводка
     остаётся — она показывает хинт с именами, — но обещает чтение, а не выбор. */
  /* ═══ ПОРЯДОК: СТРОКА С РУКОЯТКАМИ ═══════════════════════════════════════════
     Тот же ритм и те же цвета, что у корзины, — это соседние виды одного ряда, и второй
     набор размеров рядом с первым разошёлся бы при первой правке. Отличается порядок
     ровно одним: рукоятки стоят СПРАВА и их две.

     ХВАТ ПОКАЗАН КУРСОРОМ. Строку можно тащить, и об этом надо сказать до того, как
     человек попробует: `grab` — единственное место, где мы это обещаем.

     ГАШЕНИЕ КРАЙНИХ — ПРОЗРАЧНОСТЬЮ, А НЕ ИСЧЕЗНОВЕНИЕМ. Пропав, кнопка сдвинула бы
     соседей и меняла ширину строки на каждом шаге перестановки. */
  .ck-answer-stroka { cursor: default; }
  .ck-answer-stroka:hover { background: transparent; color: inherit; }
  .ck-answer-stroka:hover .ck-answer-mark { color: #B6A88F; }
  /* ЗНАЧОК — ЕДИНСТВЕННАЯ ДВЕРЬ К «ВЗЯТЬ ЦЕЛИКОМ». Он кнопка, и ведёт себя как кнопка:
     рука на курсоре, свой наведённый цвет, видимый фокус с клавиатуры. Зона нажатия
     расширена padding'ом — значок в 14 пикселей пальцем не берётся.

     ВЕС СЕЛЕКТОРОВ СЧИТАН, А НЕ УГАДАН. Правило выше гасит значок при наведении на строку
     и весит три класса; написанные одним классом, «наведён» и «взято» проигрывали бы ему
     молча — значок оставался бы серым там, где обязан гореть. */
  .ck-mark-knopka { appearance: none; background: none; border: 0; padding: 0 2px;
    margin: 2px 0 0 -2px; cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; box-sizing: content-box; }
  .ck-answer-stroka .ck-mark-knopka[aria-pressed="true"] { color: #F15A34; }
  .ck-answer-stroka .ck-mark-knopka:hover { color: #F15A34; }
  .ck-answer-stroka .ck-mark-knopka:focus-visible { outline: 2px solid #F15A34;
    outline-offset: 2px; border-radius: 2px; color: #F15A34; }
  .ck-answer-mark { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: #B6A88F;
                    display: flex; align-items: center; justify-content: center; transition: color .14s; }
  .ck-answer-mark svg { width: 14px; height: 14px; }
  .ck-answer:hover .ck-answer-mark, .ck-answer:focus-visible .ck-answer-mark { color: #F15A34; }
  .ck-answer[aria-pressed="true"] { color: #F15A34; font-weight: 700; }
  .ck-answer[aria-pressed="true"] .ck-answer-mark { color: #F15A34; }
  /* Приставной ряд: то, что НЕ ответ, — переключение единицы периода. Таблетка теперь значит
     ровно одно: «это другой род действия» либо «это уже выбрано» (полоса набранного). */
  /* ЗАГОЛОВОК НАПРАВЛЕНИЯ. Не кнопка и не выглядит кнопкой: мелко, прописными, приглушённо.
     Первый заголовок без верхнего отступа — иначе список начинается с провала. */
  /* ЧИТАЕМОСТЬ, А НЕ ВКУС: 10 px цветом #B6A88F по бежевому — это подпись цветом фона,
     на экране её почти нет (замечено оператором 25.08.2026). Там, где заголовок остался,
     он обязан читаться: кегль на один шаг больше, цвет — на два шага темнее. */
  .ck-answers-head { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
                     color: #8A8073; padding: 0 0 3px 8px; margin: 14px 0 0; }
  .ck-answers-head:first-child { margin-top: 0; }
  /* ПОЛЕ ПОД ОТМЕЧЕННЫМ ПУНКТОМ — сдвинуто вправо на ширину маркера со зазором: так видно,
     что оно принадлежит строке выше, а не стоит следующим пунктом перечня. */
  .ck-answer-pole { display: flex; padding: 0 0 6px 23px; }
  .ck-answer-pole input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px;
    color: #241F1A; background: rgba(255,255,255,.62); padding: 6px 9px;
    border: 1px solid rgba(36,31,26,.16); border-radius: 3px; outline: none; }
  .ck-answer-pole input:focus { border-color: #F15A34; background: #fff; }
  .ck-answer-pole input::placeholder { color: #9C8F7B; }
  /* ЗОВ ПОДСКАЗКИ ИДЁТ ОТ ЕЁ СОБСТВЕННОГО ЦВЕТА, а не от цвета строк: часы те же (2.1s),
     но `ckБуквыЗовут` тянет к #241F1A — на подсказке это темнее покоя, и «зов» читался бы
     как затемнение. Общая деталь тут не подходит по существу, а не по недосмотру. */
  @keyframes ckПодсказкаЗовёт {
    0%, 100% { color: #9C8F7B; }
    50%      { color: #F15A34; }
  }
  .ck-pole-zovyot input::placeholder { animation: ckПодсказкаЗовёт 2.1s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    .ck-pole-zovyot input::placeholder { animation: none; color: #F15A34; }
  }
  .ck-answers-extra { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0 8px; }
  /* ── ДВА УРОВНЯ: КОРЗИНА И ТО, ЧТО В НЕЙ ВЫБРАНО ───────────────────────────────
     Строка корзины — та же `.ck-answer`, что и всюду: род действия у них один, «нажми и
     ответь», и заводить ей свой оттенок значило бы сказать вид вместо смысла.
     «+» — ОТДЕЛЬНАЯ КНОПКА РЯДОМ, А НЕ ЗНАЧОК ВНУТРИ СТРОКИ. Кнопка внутри кнопки и
     разметкой незаконна, и на ощупь неотличима от нажатия на саму строку.
     ВЫБРАННОЕ ЛЕЖИТ ПОД СВОЕЙ СТРОКОЙ И С ОТСТУПОМ. Отступ и вертикаль — это и есть связь
     «эти пункты из неё»; тот же язык, что в дереве кейса справа, и намеренно тот же. */
  /* ПОДПИСЬ ПОД НАЗВАНИЕМ — ТРИ СТРОКИ, ДАЛЬШЕ МНОГОТОЧИЕ. У блоков процессов подпись это
     объяснение работы: 72 из 289 длиннее 140 знаков, самое длинное 291. Пятистрочные
     подписи превращают список выбора в чтение, и человек перестаёт видеть сами пункты.
     ПОЛНЫЙ ТЕКСТ НЕ ПРОПАДАЕТ: он остаётся в `title` — срез виден и снимается наведением. */
  .ck-answer-smysl { font-size: 12px; line-height: 1.35; color: #9C938A; font-weight: 500;
                     display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
                     overflow: hidden; }
  .ck-answers-vetka { display: flex; flex-direction: column; }
  .ck-answers-ryad { display: flex; align-items: flex-start; gap: 4px; }
  .ck-answers-ryad > .ck-answer { flex: 1 1 auto; min-width: 0; }
  .ck-answer-schet { flex: 0 0 auto; margin-left: auto; font-size: 11px; font-weight: 700;
                     color: #F15A34; background: #FDEFE9; border-radius: 999px; padding: 1px 7px; }
  .ck-answer-plus { flex: 0 0 auto; border: 1px dashed rgba(36,31,26,.22); background: transparent;
                    color: #8A8073; cursor: pointer; width: 30px; height: 30px; margin-top: 2px;
                    border-radius: 50%; padding: 0; display: flex; align-items: center;
                    justify-content: center; transition: all .16s; }
  .ck-answer-plus:hover, .ck-answer-plus:focus-visible { border-color: #F15A34; color: #F15A34; }
  .ck-answer-plus svg { width: 14px; height: 14px; }
  /* ЗДЕСЬ СТОЯЛИ ПРАВИЛА `.ck-vetka-chipy` — рамка для чипов ПОД родительской строкой.
     Сняты 05.09.2026 вместе с самими чипами: набранное собирается в области ввода, класс
     больше никем не ставится. Мёртвый стиль хуже отсутствующего — он читается как «где-то
     это ещё рисуется», и первый же ищущий пойдёт искать несуществующее место. */
  /* ПОПАП ВЫБОРА — НЕ ПОДСКАЗКА. В подсказке читают, здесь ЖМУТ: значит он ловит мышь
     (`pointer-events` по умолчанию), прокручивается и закрывается сам. Родня подсказки по
     виду — тень, скругление, светлый лист, — но не по поведению. */
  .ck-popap-vybor { position: fixed; z-index: 2000; width: 392px; max-width: calc(100vw - 24px);
                    max-height: 62vh; overflow-y: auto; background: #FBF7F1; color: #241F1A;
                    border: 1px solid rgba(36,31,26,.12); border-radius: 12px;
                    box-shadow: 0 18px 48px rgba(36,31,26,.20); padding: 8px; }
  .ck-popap-vybor-head { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px 8px;
                         border-bottom: 1px solid rgba(36,31,26,.08); margin-bottom: 6px; }
  .ck-popap-vybor-head b { font-size: 12px; font-weight: 800; letter-spacing: .04em;
                           text-transform: uppercase; color: #6B5A4E; }
  .ck-popap-vybor-head span { font-size: 11px; color: #9C938A; margin-left: auto; }
  .ck-pill { max-width: 100%; min-width: 0; text-align: left; white-space: normal;
             overflow-wrap: break-word; font-family: inherit; font-weight: 600; font-size: 12px;
             line-height: 1.4; padding: 7px 13px; border-radius: 999px; cursor: pointer;
             border: 1px dashed rgba(36,31,26,.22); background: transparent; color: #6B6259;
             transition: all .16s; }
  .ck-pill:hover, .ck-pill:focus-visible { border-color: #F15A34; color: #F15A34; }
  .ck-pill[aria-pressed="true"] { border-color: #F15A34; background: #FDEFE9; color: #F15A34; }
  /* ── ПОЛОСА НАБРАННОГО. Одна строка над полем ввода: что выбрано, то и уйдёт.
        Прокрутка ГОРИЗОНТАЛЬНАЯ и ТОЛЬКО кнопками — полосы прокрутки нет (`scrollbar-width:none`),
        потому что она бы вылезла отдельной серой чертой поперёк разговора. Кнопки прячутся
        целиком, когда всё и так помещается: две мёртвые стрелки по краям короткой строки
        объясняют экран вместо того, чтобы им пользовались. */
  /* ═══ НАБРАННОЕ ВНУТРИ СВЕТЛОЙ ОБЛАСТИ ══════════════════════════════════════
     Занимает ВСЮ ширину строки флекса — оттого поле с самолётиком переносятся ниже, а
     область растёт под баблы. Само поле при этом не трогается: его предел в пять строк
     стоит отдельно и от числа баблов не зависит.
     ПЕРЕНОС ПО СТРОКАМ, А НЕ ПРОКРУТКА. У прежней полосы были стрелки влево-вправо: набранное
     уезжало за край и человек не видел, что именно уйдёт. Внутри области прятать нечего. */
  .ck-nabrannoe { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px;
                  padding: 0 0 2px; min-width: 0; }
  /* ГРУППА НАЗЫВАЕТ СЕБЯ ЦЕЛИКОМ: «Рост: Вырастить аудиторию + 1». Имя корзины впереди —
     человек выбирал внутри неё, и без имени бабл читается как пункт ниоткуда. */
  .ck-nabrannoe .ck-grup-imya { font-weight: 700; color: #8A7C6B; }
  .ck-nabrannoe .ck-grup-eshchyo { color: #8A7C6B; }
  /* ПОПАП ГРУППЫ — ПОЛНЫЙ СПИСОК И КРЕСТИК У КАЖДОГО. Крестик на самом бабле снимает всю
     группу; здесь снимают по одному. Обе двери названы, и это решение оператора. */
  .ck-grup-popap { position: fixed; z-index: 60; display: none; background: #fff;
                   border-radius: 3px; box-shadow: 0 14px 34px rgba(36,31,26,.16);
                   padding: 10px 12px; max-width: 320px; font-size: 12px; color: #241F1A; }
  .ck-grup-popap .ck-grup-stroka { display: flex; align-items: center; gap: 8px;
                                   justify-content: space-between; padding: 3px 0; }
  .ck-picked { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
  .ck-picked-line { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth;
                    scrollbar-width: none; -ms-overflow-style: none; }
  .ck-picked-line::-webkit-scrollbar { display: none; }
  /* ЧИП ПОД СТРОКОЙ КОРЗИНЫ ТИШЕ, ЧЕМ В ПОЛОСЕ НАБРАННОГО (решение оператора 31.08.2026).
     Полоса набранного — последнее, что человек читает перед отправкой, и там чип говорит в
     полный голос. Под строкой корзины чипов бывает пять, и они спорят с самими пунктами:
     это отметка о выборе, а не сам выбор. */
  /* РАЗМЕР БАБЛА · 12 → 11 → 10 px, два захода по слову оператора 05.09.2026.
     УМЕНЬШАЕТСЯ ВСЁ РАЗОМ, А НЕ ОДИН ШРИФТ: отступы, зазор, крестик и предел ширины.
     Сбавить один кегль значило бы оставить бабл прежней высоты с мелкими буквами внутри —
     «меньше шрифт» человек говорит про ВЕЩЬ, а не про её часть. */
  .ck-picked-item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; max-width: 230px;
                    background: #F3E7D8; color: #241F1A; font-size: 10px; font-weight: 600; line-height: 1.35;
                    padding: 3px 3px 3px 8px; border-radius: 999px; white-space: nowrap; }
  .ck-picked-item > span { overflow: hidden; text-overflow: ellipsis; }
  /* СЧЁТЧИК НЕ РЕЖЕТСЯ И НЕ ЖМЁТСЯ. Он сосед обрезаемого имени, а не его часть: имя
     укорачивается многоточием, число остаётся целым при любой длине пункта. */
  .ck-picked-item > .ck-grup-eshchyo { overflow: visible; text-overflow: clip; flex: 0 0 auto; }
  .ck-picked-x { border: none; background: transparent; color: #8A7C6B; cursor: pointer; flex: 0 0 auto;
                 display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
                 border-radius: 50%; padding: 0; font-size: 11px; transition: all .16s; }
  /* ЗНАЧОК КРЕСТИКА ЗАДАЁТСЯ ЯВНО. Вшитый набор рисует svg своим размером, и кружок,
     уменьшенный без него, получил бы значок больше себя. */
  .ck-picked-x svg { width: 10px; height: 10px; }
  .ck-picked-x:hover, .ck-picked-x:focus-visible { background: #F15A34; color: #fff; }
  .ck-picked-nav { flex: 0 0 auto; border: 1px solid rgba(36,31,26,.14); background: #fff; color: #6B6259;
                   width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; font-size: 13px;
                   display: flex; align-items: center; justify-content: center; transition: all .16s; }
  .ck-picked-nav:disabled { opacity: .25; cursor: default; }
  .ck-picked-nav:not(:disabled):hover { border-color: #F15A34; color: #F15A34; }
  /* ── ИНФОГРАФИКА ДОКУМЕНТОВ: врезки «разложение», «развилка», «связка» и «лента» (см. ckWidgetHtml).
        Вид повторяет PDF: Manrope, коралл #F15A34, тёмный #241F1A, приглушённый rgba(36,31,26,.55),
        линейки rgba(36,31,26,.12); углы острые — скруглений тут нет вовсе. */
  .ck-wg { margin: 16px 0 20px; padding: 15px 17px 14px; background: #FBF7F0; border: 1px solid rgba(36,31,26,.12); }
  .ck-wg-top { display: flex; align-items: baseline; gap: 14px; justify-content: space-between; }
  .ck-wg-h { min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.3; color: #241F1A; overflow-wrap: break-word; }
  .ck-wg-lim { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(36,31,26,.55); white-space: nowrap; }
  .ck-wg-bar { margin-top: 19px; }
  .ck-wg-track { position: relative; height: 30px; background: #fff; border: 1px solid rgba(36,31,26,.12); }
  .ck-wg-seg { position: absolute; top: 0; bottom: 0; }
  .ck-wg-rest { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(36,31,26,.34); }
  .ck-wg-limmark { position: absolute; top: -7px; bottom: -7px; width: 0; border-left: 2px dashed rgba(36,31,26,.5); }
  .ck-wg-tick { position: absolute; top: -7px; height: 45px; width: 0; border-left: 1.5px solid rgba(36,31,26,.6); }
  .ck-wg-marks { position: relative; height: 17px; margin-top: 6px; }
  .ck-wg-mark { position: absolute; top: 0; padding: 0 4px; background: #FBF7F0; white-space: nowrap; font-size: 11px; font-weight: 600; line-height: 15px; color: rgba(36,31,26,.55); }
  .ck-wg-mark b { font-weight: 800; color: #241F1A; }
  .ck-wg-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
  .ck-wg-key { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; font-size: 12.5px; line-height: 1.35; color: rgba(36,31,26,.55); }
  .ck-wg-key > span { min-width: 0; overflow-wrap: break-word; }
  .ck-wg-key b { font-weight: 800; color: #241F1A; }
  .ck-wg-sw { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 4px; }
  .ck-wg-note { margin-top: 12px; font-size: 11px; font-weight: 500; line-height: 1.45; color: rgba(36,31,26,.55); }
  .ck-wg-fork { display: grid; align-items: stretch; grid-template-columns: minmax(0,auto) 52px minmax(0,1fr); --wg-stub: 22px; }
  .ck-wg-fork.is-bare { grid-template-columns: 0 26px minmax(0,1fr); --wg-stub: 8px; }
  .ck-wg-node { position: relative; grid-column: 1; align-self: center; min-width: 0; max-width: 250px; padding-right: 2px; font-size: 14px; font-weight: 800; line-height: 1.3; color: #241F1A; overflow-wrap: break-word; }
  .ck-wg-node::after { content: ''; position: absolute; left: 100%; top: 50%; width: var(--wg-stub); border-top: 1px solid rgba(36,31,26,.22); }
  .ck-wg-join { position: relative; }
  .ck-wg-join::before { content: ''; position: absolute; left: var(--wg-stub); right: 0; top: 50%; border-top: 1px solid rgba(36,31,26,.22); }
  .ck-wg-join::after { content: ''; position: absolute; left: var(--wg-stub); top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(36,31,26,.22); }
  .ck-wg-join.is-first::after { top: 50%; }
  .ck-wg-join.is-last::after { bottom: 50%; }
  .ck-wg-branch { position: relative; min-width: 0; padding: 10px 0 10px 15px; }
  .ck-wg-branch::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: #F15A34; }
  .ck-wg-if { font-size: 13px; line-height: 1.45; color: #241F1A; overflow-wrap: break-word; }
  .ck-wg-then { margin-top: 3px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: #F15A34; overflow-wrap: break-word; }
  @media (max-width: 700px) { .ck-wg-fork { grid-template-columns: minmax(0,auto) 34px minmax(0,1fr); --wg-stub: 14px; } .ck-wg-node { max-width: 150px; } .ck-wg-branch { padding-left: 12px; } }
  /* СВЯЗКА: перечень AI-агентов. Голова — ЖИВОЙ inline-svg из heads.js (SMIL-анимация), не картинка-заглушка:
     маленькая, 42px; врезка широкая → 2 колонки, узкая → 1. Головы по id нет — агент рисуется без неё. */
  .ck-wg-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 17px 22px; align-items: start; }
  .ck-wg-ag { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
  .ck-wg-ag.is-bare { padding-left: 53px; }   /* головы нет — слот всё равно держим, иначе левый край колонки рвётся */
  .ck-wg-face { flex: 0 0 auto; width: 42px; height: 42px; margin-top: -2px; }
  .ck-wg-face > svg { display: block; width: 100%; height: 100%; }
  .ck-wg-agb { flex: 1 1 auto; min-width: 0; }
  .ck-wg-agn { font-size: 13.5px; font-weight: 800; line-height: 1.25; color: #241F1A; overflow-wrap: break-word; }
  .ck-wg-agd { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: rgba(36,31,26,.62); overflow-wrap: break-word; }
  .ck-wg-agr { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 7px 9px 8px; background: #FCEBE3; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: #241F1A; }
  .ck-wg-agr > svg { flex: 0 0 auto; margin-top: 3px; }
  .ck-wg-agr > span { min-width: 0; overflow-wrap: break-word; }
  @media (max-width: 620px) { .ck-wg-band { grid-template-columns: minmax(0,1fr); } }
  /* ── ЛЕНТА РАСЧЁТА (школьный столбик). Вид один в один с бумагой (pdf/template.js,
        .wgt*): ни рамы, ни подложки, ни ярлыка — только выключка, черта, табличные
        цифры и вес. Класс СВОЙ, не .ck-wg: у той подложка #FBF7F0 и рама, а лента
        говорит «проверь», а не «остановись».
        Курс тот же, что у остальных врезок: экранные px — исходные, бумага берёт
        их через WG_K (1px = 0.279 мм). Поэтому кегли и отступы здесь — те самые
        числа, что стоят под wgMm()/wgPt() в шаблоне.
        Единственное исключение — предельная ширина подписи у ОДИНОЧНОГО столбика:
        она задана долей МЕРЫ, а не пикселями. Мера предпросмотра (760−32−32=696px)
        шире бумажной (156мм = 559.7px по тому же курсу) в 1.24 раза, и 300px
        бумаги — это 53.6% её меры; те же 53.6% на экране дают ту же картинку, а
        300px дали бы столбик, вдвое уже прижатый к левому краю. */
  .ck-wgt { margin: 15px 0 18px; }
  .ck-wgt-h { font-size: 13px; font-weight: 800; line-height: 1.25; color: #241F1A; overflow-wrap: break-word; }
  .ck-wgt-g { display: grid; justify-content: start; align-items: baseline; column-gap: 6px; }
  .ck-wgt-h + .ck-wgt-g { margin-top: 11px; }
  .ck-wgt-cap.is-next, .ck-wgt-l.is-next, .ck-wgt-sp.is-next, .ck-wgt-tc.is-next { padding-left: 26px; }
  .ck-wgt-cap { grid-column: span 2; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(36,31,26,.55); line-height: 1.3; overflow-wrap: break-word; }
  .ck-wgt-l { min-width: 0; font-size: 12.5px; line-height: 16px; color: rgba(36,31,26,.62); overflow-wrap: break-word; }
  .ck-wgt-x { display: block; margin-top: 1px; padding-left: 10px; font-size: 11.5px; line-height: 15px; font-weight: 500; color: rgba(36,31,26,.55); }
  .ck-wgt-op { font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(36,31,26,.55); text-align: center; }
  .ck-wgt-v { font-size: 12.5px; line-height: 16px; font-weight: 800; color: #241F1A; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
  /* Цифры отдельным элементом: по ИХ правому краю стоит вертикаль столбика. */
  .ck-wgt-n { font-variant-numeric: lining-nums tabular-nums; }
  /* Единица суффиксом. КЕГЛЬ АБСОЛЮТНЫЙ И ОДИН НА ВСЮ ЛЕНТУ: выключка вправо ведёт
     правый край суффикса, цифры встают левее ровно на его ширину, и ширина эта
     обязана совпасть в строке слагаемого (12.5px) и в строке итога (14px).
     Относительный кегль увёл бы цифры итога из вертикали. */
  .ck-wgt-u { padding-left: 3px; white-space: nowrap; font-size: 10px; font-weight: 500; letter-spacing: .01em; color: rgba(36,31,26,.55); }
  .ck-wgt-rule { grid-column: span 2; height: 0; margin: 5px 0 4px; border-top: 1px solid rgba(36,31,26,.32); }
  .ck-wgt-ts { font-size: 14px; line-height: 19px; font-weight: 500; color: rgba(36,31,26,.55); text-align: center; }
  .ck-wgt-tv { font-size: 14px; line-height: 19px; font-weight: 800; color: #241F1A; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
  .ck-wgt-tc { grid-column: span 3; margin-top: 3px; text-align: right; font-size: 12px; line-height: 15px; font-weight: 700; color: #241F1A; overflow-wrap: break-word; }
  .ck-wgt-leg { margin-top: 10px; font-size: 10.5px; font-weight: 600; line-height: 1.4; color: rgba(36,31,26,.55); }
  .ck-wgt-leg + .ck-wgt-note { margin-top: 7px; }
  .ck-wgt-note { margin-top: 12px; font-size: 11px; font-weight: 500; line-height: 1.45; color: rgba(36,31,26,.55); }
  /* ВЫГОДА: цитата «> **Что это даёт Вам.** …» — то, ради чего документ читают. Акцент, но не крик:
     зачин уходит в ярлык, текст остаётся обычным начертанием; таких блоков в документе бывает 4–6. */
  .ck-ben { margin: 14px 0 16px; padding: 11px 15px 12px; background: #FCEBE3; border-left: 3px solid #F15A34; }
  .ck-wg + .ck-ben, .ck-ben + .ck-wg { margin-top: 20px; }
  .ck-ben-t { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; line-height: 1; color: #F15A34; }
  .ck-ben-b { font-size: 14px; font-weight: 500; line-height: 1.55; color: #241F1A; }
  .ck-ben-b p { margin: 0; }
  .ck-ben-b p + p { margin-top: 7px; }
  .ck-ben-b b { font-weight: 800; }
  /* ТОЧКА РЕШЕНИЯ: абзац «**Где именно Вы принимаете решение.** …» — не подарок, а зона ответственности
     человека. Та же семья, что и выгода (те же отступы, тот же ритм ярлыка), но нарочно НЕ коралловая:
     светлая плашка и тёмная полоса читаются строго, а не празднично. Рядом две плашки дают пару
     «вот что Вам дают» → «вот где отвечаете Вы», а не две одинаковые кляксы. */
  .ck-dec { margin: 14px 0 16px; padding: 11px 15px 12px; background: #F1ECE4; border-left: 3px solid #241F1A; }
  /* ПАРА «выгода → точка решения»: «вот что Вы получаете» и сразу «вот где решаете Вы».
     Внутри пары отбивка вдвое меньше общей — 10px вместо 16px. Поле ОТРИЦАТЕЛЬНОЕ, и это
     не хитрость: соседние поля схлопываются, поэтому положительные 10px проигрывали бы
     нижним 16px предыдущей плашки и правило молча ничего не делало (так и было). 16-6=10.
     На бумаге то же намерение и тем же приёмом — .gain + .dec{margin-top:-2.6mm}.
     Прочие стыки (ben+ben, dec+dec, dec+ben) НЕ прижимаем: они и на бумаге идут общей
     отбивкой, а если прижать все, пара перестанет отличаться от простой очереди плашек. */
  .ck-ben + .ck-dec { margin-top: -6px; }
  .ck-wg + .ck-dec, .ck-dec + .ck-wg { margin-top: 20px; }
  .ck-dec-t { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; line-height: 1; color: #241F1A; }
  .ck-dec-b { font-size: 14px; font-weight: 500; line-height: 1.55; color: #241F1A; }
  .ck-dec-b p { margin: 0; }
  .ck-dec-b p + p { margin-top: 7px; }
  .ck-dec-b b { font-weight: 800; }


/* ── ЧТЕНИЕ: МОРГАЮТ ВСЕ, ПОКА НИКТО НЕ НАЙДЕН ──────────────────────────────────
   Слово оператора 02.09.2026: сперва моргают все пункты, нашёлся один — мигает только он,
   дальше каждый по мере добавления. Признак чтения — не отдельный элемент, а СОСТОЯНИЕ
   кнопок; поэтому он не может «мелькнуть» и порога показа ему не нужно.

   ═══ ЧТЕНИЕ И НАХОДКА РАЗВЕДЕНЫ ТАКТОМ, А НЕ ЦВЕТОМ ═══════════════════════════════
   Совпади они — первые полсекунды человек видит «подошли все», ровно ту картину, которую
   убрали этим же утром (подсветка зажигала 6 целей из 6). Чтение: слабый ОБЩИЙ пульс, все
   в такт, без сдвига фаз. Находка: прежняя подсветка со своим тактом. Спутать нельзя даже
   краем глаза, и различие МЕРЯЕТСЯ — у тактов разные имена, их видно из getComputedStyle. */
.ck-chitaem .ck-answer{ animation: ck-chitaem-puls 1.15s infinite ease-in-out; }
@keyframes ck-chitaem-puls{ 0%,100%{ opacity:.62; } 50%{ opacity:1; } }

/* ДВИЖЕНИЕ — НЕ ВСЕМ, И ТОГДА ЧТЕНИЕ ПОКАЗЫВАЕТСЯ СЛОВАМИ. Отнять у этого человека и пульс,
   и строку значило бы вернуть ему ровно то неразличимое молчание, от которого он страдает
   больше других: у него нет второго способа отличить «думаю» от «не понял». */
@media (prefers-reduced-motion: reduce){
  .ck-chitaem .ck-answer{ animation:none; }
}

/* ── ПРИЗНАК РАБОТЫ ПОД КНОПКАМИ ────────────────────────────────────────────────
   ЗАЧЕМ. Подсветку на вопросе с привязкой считает та же дорога, что запишет ответ, и на
   длинной фразе она думает до 5,6 с. Беда не в секундах: молчащий экран НЕОТЛИЧИМ от
   ответа «ничего не подошло» — те же непогашенные кнопки. Признак разводит эти два
   состояния, и ожидание перестаёт читаться отказом.

   ТИШЕ НАПОМИНАНИЯ. Это не сообщение человеку, а знак, что мы заняты: он не должен
   перетягивать взгляд с кнопок, среди которых человек ищет свою.

   ТОЧКИ — ЧИСТЫЙ CSS, БЕЗ ИКОНКИ. Имя, которого нет во вшитой сборке Lucide, даёт пустой
   квадрат МОЛЧА, и грепом по бандлу это не ловится. У пульса зависимостей нет вовсе. */
.ck-zov-rabota{
  /* СТРОКА ПРЯЧЕТСЯ У ТЕХ, КТО ВИДИТ ПУЛЬС: два признака одного и того же спорят за взгляд,
     а пульс на кнопках стоит там, куда человек и так смотрит. Строка — запасной способ,
     и включается она ниже, под `prefers-reduced-motion`. */
  display:none; align-items:center; gap:6px;
  margin:6px 2px 0; font-size:12px; line-height:1.3;
  color:var(--ck-tusklo, #8C8271);
}
.ck-zov-tochki{ display:inline-flex; gap:3px; }
.ck-zov-tochki i{
  width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:.35;
  animation:ck-zov-puls 1.05s infinite ease-in-out;
}
.ck-zov-tochki i:nth-child(2){ animation-delay:.16s; }
.ck-zov-tochki i:nth-child(3){ animation-delay:.32s; }
@keyframes ck-zov-puls{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

/* ДВИЖЕНИЕ — НЕ ВСЕМ. Кому оно мешает, признак остаётся: гаснет пульс, а не сообщение.
   Убрать вместе с движением сам знак значило бы вернуть тому же человеку неразличимое
   молчание, от которого он и страдает больше других. */
@media (prefers-reduced-motion: reduce){
  .ck-zov-rabota{ display:flex; }   /* пульса не будет — чтение говорится словами */
  .ck-zov-tochki i{ animation:none; opacity:.6; }
}

/* ═══ ПОЛЕ ВВОДА АНКЕТЫ — 40% МЕНЬШЕ, ЧЕМ У РАЗГОВОРА ════════════════════════════
   Слово оператора 05.09.2026: «размер самой рамки и кнопки — уменьши на 40%».
   ПРАВИМ КЛОН, А НЕ ИСХОДНУЮ РАЗМЕТКУ. Анкета клонирует экран разговора целиком
   (`cockpit-anketa-rama.js`), и правка в `index.html` уменьшила бы заодно поле
   распаковки — экран, о котором речи не было. Класс вешается на клон, и только он.

   ЧИСЛА — РОВНО 60% ОТ ПРЕЖНИХ, а не «на глаз»: 14→8, 16→10, 42→25, 12→7, 18→11.

   ⚠ РАЗМЕР БУКВ НЕ ТРОНУТ. Просили рамку и кнопку; шрифт остаётся 13.5px, иначе
     поле стало бы мельче читаемого, а этого не заказывали. */
.ck-ank-vvod{
  align-items: flex-end !important;   /* КНОПКА СТОИТ НА МЕСТЕ, ПОЛЕ РАСТЁТ ВВЕРХ.
                                         При `center` кнопка уезжала бы к середине по мере
                                         роста поля — то есть «на месте» она бы не осталась. */
  gap: 6px !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}
.ck-ank-vvod > textarea{
  /* ПЯТЬ СТРОК — ЗДЕСЬ И БОЛЬШЕ НИГДЕ. 13.5px × 1.45 = 19.575px на строку, пять строк =
     97.9px. Рост читает эту величину из стиля, а не хранит своё число: два места, где
     записана одна величина, однажды разойдутся. */
  max-height: 98px !important;
}
.ck-ank-vvod > button{
  /* РАМКА СЧИТАЕТСЯ В ШИРИНУ, ИНАЧЕ 25 НА ЭКРАНЕ НЕ 25. У кнопки своё умолчание по
     отступам от браузера: при `content-box` замер дал 30 px вместо назначенных 25.
     Оператор просил размер того, что видно, а не того, что написано. */
  box-sizing: border-box !important;
  padding: 0 !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
}
.ck-ank-vvod > button svg{ width: 11px !important; height: 11px !important; }

/* ═══ КНОПКИ СТРОКИ СВОДКИ: ВИДНЫ ПРИ НАВЕДЕНИИ И ПРИ ФОКУСЕ ════════════════════
   Слово оператора 07.09.2026: кнопки «Уточнить» и «Изменить» появляются при наведении.
   ПРАВИЛОМ, А НЕ СЛУШАТЕЛЯМИ. Первая редакция вешала `mouseenter`/`mouseleave` на строку
   и меняла `style.opacity` из кода. Работало это только у мыши и только в живом браузере:
   проба навести не смогла — событие, посланное из скрипта, до слушателя не дошло, и
   проверить утверждение было нечем. `:hover` и `:focus-within` считает браузер, они же
   покрывают клавиатуру, и на них можно смотреть замером.
   `pointer-events` снимается вместе с прозрачностью: невидимая кнопка не должна ловить
   нажатия там, где человек целится в текст. */
.ck-svodka-stroka .ck-svodka-knopki { opacity: 0; pointer-events: none; transition: opacity .14s; }
.ck-svodka-stroka:hover .ck-svodka-knopki,
.ck-svodka-stroka:focus-within .ck-svodka-knopki { opacity: 1; pointer-events: auto; }

/* ═══ КНОПКА-ЗНАЧОК СТРОКИ СВОДКИ И ЕЁ ПОДПИСЬ ══════════════════════════════════
   Подпись рисуем сами, а не нативным `title`: тот появляется через секунду, живёт по
   правилам системы и выглядит чужим на экране. Своя — сразу, в цветах формы.
   ПОДПИСЬ НЕ ЛОВИТ МЫШЬ (`pointer-events:none`): всплыв под курсором, она увела бы
   наведение с кнопки, кнопка «погасла» бы, подпись исчезла — и так по кругу. */
.ck-svodka-knopka { width: 28px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid rgba(36,31,26,.14); background: #fff;
  color: #6B6259; border-radius: 3px; cursor: pointer; padding: 0; position: relative;
  transition: border-color .14s, color .14s; }
.ck-svodka-knopka svg { width: 15px; height: 15px; }
.ck-svodka-knopka:hover, .ck-svodka-knopka:focus-visible { border-color: #F15A34; color: #F15A34; }
.ck-svodka-knopka:focus-visible { outline: 2px solid rgba(241,90,52,.35); outline-offset: 2px; }
.ck-svodka-knopka::after { content: attr(data-hint); position: absolute; top: calc(100% + 7px);
  right: 0; white-space: nowrap; background: #241F1A; color: #fff; font-family: inherit;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; padding: 5px 9px;
  border-radius: 7px; box-shadow: 0 6px 18px rgba(36,31,26,.22); opacity: 0;
  pointer-events: none; transform: translateY(-3px); transition: opacity .12s, transform .12s;
  z-index: 5; }
.ck-svodka-knopka:hover::after, .ck-svodka-knopka:focus-visible::after {
  opacity: 1; transform: translateY(0); }

/* ГОЛАЯ КНОПКА-ЗНАЧОК: та же деталь, снятые рамка и фон. Нужна там, где кнопка стоит
   ВНУТРИ уже обведённой панели: второй контур внутри первого дробит её на клетки. */
.ck-svodka-knopka.ck-knopka-golaya { border-color: transparent; background: transparent; }
.ck-svodka-knopka.ck-knopka-golaya:hover,
.ck-svodka-knopka.ck-knopka-golaya:focus-visible { border-color: transparent; color: #F15A34; }

/* ═══ УГОЛ СТРОКИ: ЧТО ПОКАЗАНО, РЕШАЕТ СОСТОЯНИЕ СТРОКИ ════════════════════════
   Слово оператора 07.09.2026: в покое — «Уточнить» и «Изменить» по наведению; в правке —
   «Отмена», и ПОСТОЯННО. Пока внизу открыт редактор, выход должен быть виден, а не спрятан
   под курсор: человек уже в поле, и искать наведением то, чем бросить начатое, — лишний ход.
   ПРАВИЛОМ, А НЕ КОДОМ. Видимость считает браузер по классу строки; менять `style` из
   обработчиков значило бы держать состояние в трёх местах — открытии, закрытии и переходе
   на другую строку. */
.ck-svodka-knopka.ck-knopka-otmena { display: none; }
.ck-svodka-stroka.ck-v-pravke .ck-svodka-knopki { opacity: 1; pointer-events: auto; }
.ck-svodka-stroka.ck-v-pravke .ck-svodka-knopka { display: none; }
.ck-svodka-stroka.ck-v-pravke .ck-svodka-knopka.ck-knopka-otmena { display: inline-flex; }


/* ═══ ПАНЕЛЬ ВАЖНОСТИ (07.09.2026): КАРТОЧКИ РАБОТ, ПОРЯДОК ЗАДАЁТ ЧЕЛОВЕК ═══════════
   Механика и её доводы перенесены из `proto-poryadok.html` — прототипа, снятого с шага 2
   06.09.2026. Своя реализация на HTML5-drag была написана мимо него и им же опровергнута:
   «строка едет призраком браузера, соседи стоят на месте, а на касании его нет вовсе».
   ═════════════════════════════════════════════════════════════════════════════════════ */
.ck-vazh-karta { display: flex; align-items: center; gap: 8px; background: #FBF7F0;
                 border-radius: 10px; padding: 8px 10px; cursor: grab;
                 /* СГЛАЖИВАНИЕ — СОСЕДЯМ, НЕ ТАЩИМОЙ: см. заглавие блока. */
                 transition: transform .16s cubic-bezier(.2,.7,.3,1); }
.ck-vazh-karta:active { cursor: grabbing; }
.ck-vazh-tashchat { transition: none; z-index: 3; position: relative;
                    background: #fff; box-shadow: 0 10px 26px rgba(36,31,26,.16);
                    cursor: grabbing; }
.ck-vazh-tekst { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600;
                 color: #241F1A; line-height: 1.3; transition: color .14s; }
.ck-vazh-ruchka { flex: 0 0 auto; display: block; color: #C9BCA8; transition: color .14s; }
.ck-vazh-info { flex: 0 0 auto; display: block; color: #C9BCA8; cursor: help;
                transition: color .14s; }
.ck-vazh-info:hover { color: #F15A34; }
/* СТРОКА СВЕТИТСЯ ВСЯ, А НЕ ОДНОЙ РУЧКОЙ: хват работает по всей ширине карточки, и
   обещать его одиннадцатью пикселями значило бы сузить обещание. Цветом, а не заливкой:
   заливка читается как «выбрано», а выбирать здесь нечего — весь список уже ответ. */
.ck-vazh-karta:hover .ck-vazh-tekst,
.ck-vazh-tashchat .ck-vazh-tekst { color: #F15A34; }
.ck-vazh-karta:hover .ck-vazh-ruchka,
.ck-vazh-tashchat .ck-vazh-ruchka { color: #F15A34; }
/* ХВАТ ОТНИМАЕТ ПРОКРУТКУ ТОЛЬКО НА ВРЕМЯ ХВАТА. Насовсем — значит отнять у пальца
   прокрутку всего экрана; списков на нём много, и человек застрял бы. */
body.ck-vazh-idet { user-select: none; touch-action: none; }
@media (prefers-reduced-motion: reduce) {
  .ck-vazh-karta { transition: none; }
}