/* Вкладка «Скрипт» — база знаний отдела продаж.
   Отдельный файл, а не дописка в style.css: правки вкладки не должны задевать
   вёрстку остальных четырёх вкладок. Цвета берём переменными основной темы. */

.kb { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }

/* Две колонки: слева скрипт, справа семинары. Поровну — по просьбе заказчика:
   плашка семинара должна быть шириной в две плашки разговора, а экран —
   поделён посередине. Арифметика сходится ровно: при окне 1400 на колонку
   приходится (1400 − 32) / 2 = 684px, слева в них встают две плашки по 335px с
   зазором 14px (те же 684), справа — одна плашка семинара во всю колонку (см.
   .kb-col-side .kb-tiles ниже). Цена решения названа прямо: плашек скрипта в
   ряду становится две вместо трёх, то есть прокрутки в левой колонке больше.

   Раньше правая была minmax(0, 400px) — узкой полосой списка названий. С неё
   всё и началось: имя преподавателя в 400px не помещалось и срезалось
   многоточием.

   minmax(0, 1fr), а не 1fr: без нижней границы в ноль длинная строка внутри
   плашки распирает колонку изнутри и выдавливает соседнюю за край экрана.

   Пустая правая колонка при такой сетке отбирает уже не 400px, а половину
   экрана, и display: none на её содержимом этого не отменяет: трек существует
   независимо от того, видно ли то, что внутри. Освобождает место только смена
   сетки самой обёртки — см. .kb-split:has(...) ниже.

   Зазор между колонками — 32px, а не 20: плашки скрипта и плашки семинаров
   нарисованы одинаково (белый прямоугольник со скруглением и светлой рамкой),
   и на 20px крайняя плашка скрипта читалась как соседка семинара по одному
   ряду. 32px — ровно вдвое больше зазора между самими плашками (14px, см.
   .kb-tiles): граница колонок становится заметнее любого шва внутри них. */
.kb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* root.innerHTML = '' в kb-seminars.js оставляет узел ровно :empty — как только
   задача 8 положит в него разметку, оба правила ниже перестанут действовать
   сами, без правки здесь. */
.kb-col-side:empty { display: none; }

/* Пока правая колонка пуста — одна колонка на всю ширину, без остатка
   зазора. :has() читает состояние потомка и переключает сетку обёртки,
   а не полагается на то, что скрытый потомок сам сожмёт свой трек (см.
   комментарий у .kb-split — он этого не делает). gap: 0 обязателен отдельно:
   без него между единственной колонкой и пустым местом справа оставался бы
   зазор в 20px. Замерено: с этим правилом левая колонка занимает все 1400px
   из 1400 при пустой правой. */
.kb-split:has(.kb-col-side:empty) {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Приложение открывается в узком окне внутри Битрикс24, поэтому одна колонка —
   не запасной режим, а рабочий: правая уезжает вниз, ничего не теряется. */
@media (max-width: 1080px) {
  .kb-split { grid-template-columns: 1fr; }
}

/* Раньше отступ между разделами/поиском/сообщениями/списком держал flex-gap
   родителя .kb. Теперь между ними встал .kb-split, и без своего flex-column
   с тем же gap разделы слиплись бы без единого пикселя между ними.
   container-type: inline-size нужен единственному правилу @container ниже —
   потолку в четыре колонки. Само число колонок сетка считает по ширине этой
   колонки и без него (auto-fill, см. .kb-tiles): держать раскладку на одних
   контейнерных запросах опасно — браузер, который их не понимает, пропустил бы
   все пороги разом. */
.kb-col-main { display: flex; flex-direction: column; gap: 16px; container-type: inline-size; }

/* Тот же приём для правой колонки: плашки семинаров и куски методички внутри
   неё (задача 8) тоже собраны через KBView.grid()/.kb-tiles. Число колонок ей
   при этом считать не нужно вовсе — оно всегда одно, см. правило ниже.
   container-type стоит тут как страховка: без него правило @container искало бы
   контейнер выше по дереву, и стоило бы кому-то позже сделать контейнером
   .kb-split или .kb — правая колонка начала бы отвечать за чужую ширину. */
.kb-col-side { display: flex; flex-direction: column; gap: 16px; container-type: inline-size; }

/* Одна плашка в ряд — то, ради чего колонку и расширяли. Без этого правила
   расширение даёт обратное: сетка .kb-tiles (auto-fill от 250px) в колонке
   684px кладёт ДВЕ плашки по 335px, то есть плашка семинара становится не
   шире, а уже прежних 400px. Число колонок здесь не считается по ширине вовсе:
   в этой колонке всегда одна, и правило обычное, не @container, — значит,
   держится и в браузере, который контейнерных запросов не понимает.
   Специфичность (0,2,0) выше, чем у .kb-tiles и у потолка в @container, так что
   порядок правил в файле на него не влияет.

   Сегодня оба списка колонки показываются строками (.kb-rows ниже), и плашек в
   ней нет — правило стоит страховкой на случай, если плашки в колонку вернутся:
   без него они вернутся сразу вдвое уже, чем были до расширения колонки. */
.kb-col-side .kb-tiles { grid-template-columns: 1fr; }

.kb-bar { display: flex; gap: 12px; align-items: center; }

.kb-search {
  flex: 1;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  outline: none;
}
.kb-search:focus { border-color: var(--b24-primary); }

.kb-btn {
  padding: 9px 16px;
  font-size: 14px;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  background: var(--b24-white);
  cursor: pointer;
  white-space: nowrap;
}
.kb-btn:hover { background: var(--b24-bg); }
.kb-btn--primary { background: var(--b24-primary); border-color: var(--b24-primary); color: var(--b24-white); }
.kb-btn--primary:hover { background: var(--b24-blue-dark); }

/* Кнопка-переключатель «Архив» в нажатом состоянии (aria-pressed="true") */
.kb-btn--active { background: var(--b24-primary); border-color: var(--b24-primary); color: var(--b24-white); }
.kb-btn--active:hover { background: var(--b24-blue-dark); }

.kb-notice, .kb-error {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
}
.kb-notice { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); }
.kb-error  { background: rgba(220, 76, 70, 0.1); border: 1px solid rgba(220, 76, 70, 0.4); }

.kb-empty { color: var(--b24-text-light); padding: 24px 0; }

.kb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 38, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.kb-dialog {
  background: var(--b24-white);
  border-radius: 10px;
  padding: 22px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
}
.kb-dialog-title { margin: 0 0 16px; font-size: 18px; }
.kb-field { display: block; margin-bottom: 14px; }
/* label наравне со span: у поля с кнопкой внутри подпись вынесена в отдельный
   label с for — иначе щелчок по слову «Текст» нажимал бы кнопку. */
.kb-field > span,
.kb-field > label { display: block; font-size: 13px; color: var(--b24-text-light); margin-bottom: 5px; }
/* Галочки и точки выбора — не «поле в строку»: им эта ширина и рамка не нужны,
   а растянутая на всю строку точка отрывается от своей подписи, и подпись
   уезжает строкой ниже. Оговорка стоит у самого правила, а не заплаткой на
   отдельный класс: галочка внутри .kb-field появляется не в последний раз. */
.kb-field input:not([type="checkbox"]):not([type="radio"]),
.kb-field select,
.kb-field textarea {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  box-sizing: border-box;
}
.kb-field textarea { resize: vertical; }
.kb-dialog-actions { display: flex; gap: 10px; margin-top: 6px; }

/* Ряд под полем текста: кнопка вставки метки и объяснение рядом с ней. Подпись
   переносится по словам, кнопка — никогда: на узком окне слова уходят вниз,
   а кнопка остаётся целой. */
.kb-field-tools {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
}
.kb-btn--mini { flex: none; padding: 5px 10px; font-size: 13px; }
.kb-field-hint { font-size: 12px; line-height: 1.45; color: var(--b24-text-light); }
.kb-field-hint code {
  font-family: inherit;
  color: var(--b24-text);
  background: var(--b24-bg);
  border-radius: 4px;
  padding: 0 4px;
}

/* Предпросмотр — тот же разбор, что и в окне блока. Рамка и фон отделяют его от
   поля правки, чтобы он не читался как продолжение ввода. Кнопки внутри живые
   только на вид: нажимать в предпросмотре нечего, копируют — из окна блока.
   line-height: 1.6 повторяет окно блока не для красоты: на нём держится отступ
   пустой строки (.kb-part--gap, 1.6em), и без него предпросмотр врал бы. */
.kb-body-preview {
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  background: var(--b24-bg);
  padding: 10px 12px;
  min-height: 40px;
  max-height: 240px;
  overflow-y: auto;
}
.kb-body-preview:empty::after {
  content: 'Здесь появится текст блока';
  color: var(--b24-text-light);
  font-size: 13px;
}
.kb-body-preview .kb-part-copy { pointer-events: none; }

/* ─── Переключатель вида правки и карточки ─────────────────────────────────── */

.kb-mode { display: flex; gap: 6px; }
.kb-mode-btn {
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--b24-text);
  background: var(--b24-bg);
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  cursor: pointer;
}
.kb-mode-btn--on {
  color: var(--b24-white);
  background: var(--b24-primary);
  border-color: var(--b24-primary);
}
/* Недоступен — значит блок карточками не разбирается. Курсор оставляем обычным,
   а подсказку даёт title: перечёркнутый кружок читается как поломка. */
.kb-mode-btn:disabled { opacity: 0.5; cursor: default; }

/* Карточка — короб со своей рамкой: без неё варианты сливаются в одно полотно,
   ровно от которого мы и уходим. Отступ между коробами больше внутреннего, чтобы
   границу вариантов было видно с одного взгляда. */
.kb-cards { display: flex; flex-direction: column; gap: 12px; }
.kb-card {
  border: 1px solid var(--b24-border);
  border-radius: 8px;
  background: var(--b24-bg);
  padding: 10px 12px;
}
.kb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kb-card-num { font-size: 12px; font-weight: 600; color: var(--b24-text-light); }
.kb-card-tools { display: flex; gap: 4px; }
.kb-card-btn {
  width: 26px;
  height: 26px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--b24-text-light);
  background: var(--b24-white);
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  cursor: pointer;
}
.kb-card-btn:hover { background: var(--b24-bg); }
.kb-card-field { display: block; margin-bottom: 8px; }
.kb-card-field > span { display: block; font-size: 12px; color: var(--b24-text-light); margin-bottom: 4px; }
/* type="text" в селекторе, а не просто input: галочки карточки лежат рядом, и
   растянутая на всю строку галочка отрывается от своей подписи — то же правило,
   что и у .kb-field выше. */
.kb-card-field input[type="text"],
.kb-card-field textarea {
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  box-sizing: border-box;
}
.kb-card-field textarea { resize: vertical; min-height: 56px; }

/* Галочки в строку, но с переносом: на узком окне «своя кнопка «Копировать»»
   уходит на вторую строку целиком, а не рвётся посередине подписи. */
.kb-card-flags { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kb-card-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--b24-text-light);
  cursor: pointer;
}
.kb-card-flag input { margin: 0; }
/* Галочка последней карточки стоит всегда: кнопка в конце блока есть в любом
   случае, и снять её нечем. Гасим, чтобы это было видно, а не выяснялось нажатием. */
.kb-card-flag input:disabled { cursor: default; }
.kb-card-flag input:disabled + span { color: var(--b24-text-light); }

.kb-cards-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.kb-hist-item {
  border-bottom: 1px solid var(--b24-bg);
  padding: 10px 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.kb-hist-when { font-size: 13px; color: var(--b24-text-light); white-space: nowrap; }
.kb-hist-what { flex: 1; font-size: 14px; }

/* ─── Семинар и цены ─────────────────────────────────────────────────────── */

.kb-seminar-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kb-seminar-label { font-size: 14px; color: var(--b24-text-light); white-space: nowrap; }

/* Что делает выбор семинара. Отрицательный отступ сверху — чтобы подпись
   читалась продолжением строки выбора, а не отдельным сообщением: у .kb между
   блоками 16px, и на таком расстоянии она уже не про список наверху. */
.kb-seminar-hint { margin-top: -8px; font-size: 13px; color: var(--b24-text-light); }
.kb-seminar-select {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  font: inherit;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  background: var(--b24-white);
}

.kb-prices {
  border: 1px solid var(--b24-border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--b24-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kb-prices-defaults { display: flex; gap: 16px; flex-wrap: wrap; }
.kb-field--inline { margin-bottom: 0; flex: 1; min-width: 240px; }
.kb-prices-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kb-prices-filter { font-size: 14px; color: var(--b24-text-light); white-space: nowrap; }
.kb-prices-count { font-size: 13px; color: var(--b24-text-light); white-space: nowrap; }

/* Таблица собрана на grid, а не на <table>: одинаковые колонки нужны и на узком
   экране, где строка переносится в две. */
.kb-prices-table { display: flex; flex-direction: column; }
.kb-prices-row {
  display: grid;
  grid-template-columns: minmax(180px, 3fr) repeat(3, minmax(110px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--b24-bg);
}
.kb-prices-row--head {
  font-size: 12px;
  color: var(--b24-text-light);
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--b24-border);
  padding-bottom: 8px;
}
.kb-prices-name { font-size: 14px; }
.kb-prices-orphan { color: var(--b24-text-light); }
.kb-prices-input {
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  text-align: right;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  box-sizing: border-box;
}
.kb-prices-input:focus { border-color: var(--b24-primary); outline: none; }
.kb-prices-input:disabled { background: var(--b24-bg); color: var(--b24-text-light); }

/* Значок рисуется всегда, показывает его класс строки: после сохранения одной
   ячейки предупреждение переключается без перерисовки таблицы, иначе фокус
   вылетел бы из поля, в которое сотрудник уже перешёл. */
.kb-prices-warn {
  display: none;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: var(--b24-warning);
  color: var(--b24-text);
  font-size: 12px;
  font-weight: 700;
}
.kb-prices-row--odd .kb-prices-warn { display: inline-block; }

/* Подставленное число в тексте блока: видно, что это не набранный руками текст,
   а значение из таблицы цен. */
.kb-token {
  background: var(--b24-primary-soft);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
  white-space: nowrap;
}
.kb-token--empty { background: rgba(245, 158, 11, 0.14); color: var(--b24-warning-ink); font-weight: 400; }
.kb-token--unknown { background: rgba(220, 76, 70, 0.1); color: var(--b24-danger-ink); font-weight: 400; }

/* ─── Разделы ──────────────────────────────────────────────────────────────
   Цвет раздела — вспомогательный признак, а не единственный: раздел всегда
   назван словом на кнопке и в заголовке группы. Так вкладка остаётся понятной
   тому, кто цвета различает плохо. */

.kb-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.kb-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 14px;
  border: 1px solid var(--b24-border);
  border-bottom: 3px solid var(--b24-border);
  border-radius: 6px;
  background: var(--b24-white);
  color: var(--b24-text);
  cursor: pointer;
}
.kb-section-btn:hover { background: var(--b24-bg); }

.kb-section-n {
  min-width: 20px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background: var(--b24-bg);
  color: var(--b24-text-light);
}

.kb-section-btn--active { font-weight: 600; color: var(--b24-text); }
.kb-section-btn--active .kb-section-n { background: var(--b24-border); color: var(--b24-text); }

/* Полоса под кнопкой и есть цвет раздела: та же полоса стоит слева у плашки. */
.kb-section-btn--step.kb-section-btn--active      { border-bottom-color: var(--b24-primary); }
.kb-section-btn--objection.kb-section-btn--active { border-bottom-color: var(--b24-orange); }
.kb-section-btn--regfee.kb-section-btn--active    { border-bottom-color: var(--b24-green); }
.kb-section-btn--template.kb-section-btn--active  { border-bottom-color: var(--b24-purple); }
.kb-section-btn--fact.kb-section-btn--active      { border-bottom-color: var(--b24-text-light); }

/* Поиск и архив показывают все разделы сразу — переключатель в этот момент не
   фильтрует. Приглушаем его, но не прячем: исчезающий ряд кнопок дёргает
   вёрстку на каждый введённый символ. Клик по кнопке остаётся рабочим и
   возвращает к одному разделу. */
.kb-sections--wide { opacity: 0.55; }

/* ─── Окно с текстом блока ───────────────────────────────────────────────── */

.kb-dialog--view { max-width: 760px; }

.kb-view-head { display: flex; align-items: flex-start; gap: 12px; }
.kb-view-head > div { flex: 1; min-width: 0; }

.kb-view-step {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--b24-text-light);
  margin-bottom: 4px;
}
.kb-view-meta {
  font-size: 12px;
  color: var(--b24-text-light);
  margin-top: 6px;
}
.kb-view-title { margin: 0 0 14px; }

.kb-view-close {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--b24-text-light);
  cursor: pointer;
  padding: 0 4px;
}
.kb-view-close:hover { color: var(--b24-text); }

/* Текст читают во время звонка — 16 px и просторный межстрочный. pre-wrap
   сохраняет переносы строк, которые расставил РОП.
   overflow-wrap: длинная строка без пробелов (номер счёта в реквизитах — двадцать
   цифр подряд) иначе уезжает за край окна и тянет за собой горизонтальную полосу. */
.kb-view-body {
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 6px;
}

/* ─── Реплики внутри окна ────────────────────────────────────────────────
   Блок шага — это несколько вариантов ОДНОГО места разговора («имя знаем из
   заявки» и «имени нет»), а клиенту уходит ровно один из них. Кнопка окна
   копирует блок целиком, и менеджер вычищал лишнее руками уже в переписке —
   поэтому у каждой реплики появилась своя кнопка.

   Текст на экране при этом остался прежним: тире и пометки никуда не делись,
   разбор только расставил вокруг них кнопки.

   Пустые строки между кусками в разбор не попадают (их съедает splitParts) —
   вместо них splitParts помечает части классом --gap, и поле ниже возвращает
   пустую строку на место. Одинаковый отступ на всех кусках был бы враньём:
   доводы «Почему у нас» набраны подряд, строка к строке, а письмо про
   регистрационный сбор — через пустую строку между абзацами. */
.kb-part {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0;
}

/* Пометка вроде «Имя знаем из заявки:» относится к реплике ПОД ней и стоит к
   ней вплотную — ровно так, как набрана в тексте. */
.kb-part-cap { margin-top: 0; }

/* 1.6em — высота строки текста (.kb-view-body, line-height: 1.6). Столько же
   занимала пустая строка до разбора, поэтому блок на экране не шелохнётся.
   Не пиксели: на телефоне шрифт крупнее (17px), и пустая строка там выше. */
.kb-part--gap, .kb-part-cap--gap { margin-top: 1.6em; }

/* Сверху окна отступ уже есть — свой лишний тут не нужен, даже если РОП начал
   блок с пустой строки. */
.kb-part:first-child, .kb-part-cap:first-child { margin-top: 0; }

/* Кусок, закрытый меткой {Копировать}: кнопка стоит у последней строки, ровно
   там, где метку написали. Сверху ряда её ставить нельзя — метка помечает конец
   куска, и кнопка у начала последней реплики читалась бы как «копирую её». */
.kb-part--manual { align-items: flex-end; }

.kb-part-text { flex: 1 1 auto; min-width: 0; }

/* Тире отдельным узлом: в буфер оно уходить не должно (в сообщении клиенту это
   мусор), а на экране обязано остаться — по нему видно, где начинается реплика.
   Цветом приглушено, чтобы не спорить с первым словом фразы. */
.kb-part-mark { color: var(--b24-text-light); }

/* Ширина у всех кнопок одна, и они не тянутся за длиной реплики: ряд вдоль
   правого края читается как один столбец, а не как лесенка. Вид — тот же, что
   у кнопок плашки (.kb-tile-btn): одно и то же действие не должно выглядеть в
   двух местах по-разному. */
.kb-part-copy {
  flex: none;
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid var(--b24-border);
  border-radius: 5px;
  background: var(--b24-white);
  color: var(--b24-text);
  cursor: pointer;
  white-space: nowrap;
}
.kb-part-copy:hover { background: var(--b24-bg); }
/* flash() ставит disabled на две секунды, пока кнопка показывает результат или
   причину отказа. Без правила она эти две секунды выглядит нажимаемой. */
.kb-part-copy[disabled] { opacity: 0.6; cursor: default; }

/* Узкое окно — панель чата открытых линий и телефон. Кнопка сбоку отнимала бы у
   реплики треть ширины, и текст ломался бы по два слова в строку: уводим её под
   текст, к правому краю. */
@media (max-width: 560px) {
  .kb-part { flex-wrap: wrap; gap: 4px; }
  .kb-part-copy { margin-left: auto; }
}

.kb-view-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.kb-view-gap { flex: 1; }
.kb-view-actions .kb-btn[disabled] { opacity: 0.45; cursor: default; }

/* ─── Плашки ──────────────────────────────────────────────────────────────
   Сетка повторяет «Набор на семинары»: до четырёх колонок, дальше сколько
   поместится. Менеджер уже знает эту раскладку по соседней вкладке. */

/* Нижнее поле отделяет раздел от следующего заголовка. Видно там, где разделов на
   экране несколько сразу (выдача поиска, архив): без поля «Возражения» упираются
   прямо в нижний край плашек «Разговора».

   Число колонок считает сам браузер: auto-fill кладёт столько колонок по 250px и
   шире, сколько влезает в ЭТУ сетку, — то есть в ту колонку, где сетка стоит.
   Ни ширина окна, ни лесенка порогов тут не участвуют, и это важно сразу с двух
   сторон. Пороги на ширине окна не знали про правую колонку задачи 8, которая
   отбирает у левой половину экрана: при окне 1400 менеджер видел 2 плашки по
   483px там, где до задачи 8 было 4 по 340px, — вдвое меньше блоков на экран и
   вдвое больше прокрутки. А пороги на ширине контейнера отваливаются целиком в
   браузере, где контейнерные запросы не поддержаны: правая колонка нарисовала бы
   в себе четыре столбца по 90px (замерено на её тогдашних 400px), где не
   помещается даже нижний ряд с «Копировать». Правило без @container не
   отваливается нигде. Сегодня правая колонка до этой арифметики и не доходит —
   ей число колонок задано прямо (.kb-col-side .kb-tiles), — но общее правило
   продолжает считать по ширине контейнера, а не окна: колонок в левой при
   делении экрана пополам стало меньше, и порог по окну ошибся бы ещё грубее.

   250px — не круглое число, а измеренный минимум: нижний ряд плашки (дата,
   стрелки перестановки и «Копировать») требует 215px в одну строку, плюс 32px
   боковых полей плашки. Уже — и «Копировать» полезет за край. */
.kb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 14px;
  margin: 0 0 22px;
}
/* Потолок: пятая колонка начинает влезать с 1306px (5 × 250 + 4 × 14), и на
   широком мониторе плашки мельчали бы вместо того, чтобы дышать. Четыре — та же
   верхняя граница, что была до задачи 8. @container, а не @media: считать надо
   ширину колонки (.kb-col-main / .kb-col-side, обе container-type выше), а не
   окна. Браузер без контейнерных запросов это правило пропустит и покажет пять
   колонок по ~289px — не то, что задумано, но вполне читаемо. */
@container (min-width: 1306px) { .kb-tiles { grid-template-columns: repeat(4, 1fr); } }

.kb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: 14px 14px 10px 18px;
  border: 1px solid var(--b24-border);
  border-radius: 8px;
  background: var(--b24-white);
  cursor: pointer;
  overflow: hidden;
}
.kb-tile:hover { border-color: var(--b24-border-strong); box-shadow: 0 2px 8px rgba(31, 43, 56, 0.08); }
.kb-tile:focus-visible { outline: 2px solid var(--b24-primary); outline-offset: 2px; }

/* Цветная полоса раздела. Цвет — вспомогательный признак: раздел всегда назван
   словом в переключателе и в заголовке группы при поиске. */
.kb-tile-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.kb-tile-accent--step      { background: var(--b24-primary); }
.kb-tile-accent--objection { background: var(--b24-orange); }
.kb-tile-accent--regfee    { background: var(--b24-green); }
.kb-tile-accent--template  { background: var(--b24-purple); }
.kb-tile-accent--fact      { background: var(--b24-text-light); }

.kb-tile-main { flex: 1; min-height: 0; }

.kb-tile-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--b24-primary-soft);
  color: var(--b24-primary);
  font-size: 13px;
  font-weight: 600;
}

/* Высота под ровно две строки: иначе плашки в ряду разной высоты, и сетка
   выглядит рваной. */
.kb-tile-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Подпись семинара у куска методички в общем поиске — рядом со шагами скрипта
   она не должна выглядеть как ещё один заголовок: тот же размер и цвет, что у
   даты в подвале плашки (kb-tile-when), самая мелкая надпись на плашке.

   Ровно одна строка с многоточием, как у даты: в справочнике заказчика имена
   доходят до 79 знаков («(PHGW) Здоровье тазового дна. Постуральная
   гипопрессивная гимнастика для женщин»), и в колонке 250px такое имя заняло бы
   две-три строки — плашка вытянулась бы вместе со всем своим рядом. Заголовок
   выше обрезан по той же причине, только по двум строкам. */
.kb-tile-badge {
  font-size: 12px;
  color: var(--b24-text-light);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-tile-preview {
  font-size: 13px;
  line-height: 1.45;
  color: var(--b24-text-light);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-tile-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--b24-bg);
}
/* Дата — единственное в подвале, что можно ужать. Кнопка показывает не только
   «Копировать», но и отказы («Выберите семинар», «Цена не заполнена»), а у
   руководителя рядом с ней стоят ещё две стрелки перестановки: на плашке в
   251px (окно 1200) отказ вылезал за край на 41px и обрывался посреди буквы.
   Дату менеджер и так видит в окне просмотра, а причину отказа — больше нигде.

   min-width: 0 снимает автоминимум флекс-элемента: без него «07.08.2026» держит
   свои 62px и не отдаёт их кнопке. Остальные три свойства — чтобы ужатая дата
   не лезла поверх кнопки и оканчивалась многоточием, а не полузнаком; nowrap
   нужен и сам по себе: в правой колонке дата длинная («7 августа 2026 г.») и
   без него переносится по словам. */
.kb-tile-when {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--b24-text-light);
}

.kb-tile-btn {
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid var(--b24-border);
  border-radius: 5px;
  background: var(--b24-white);
  color: var(--b24-text);
  cursor: pointer;
  white-space: nowrap;
}
.kb-tile-btn:hover { background: var(--b24-bg); }
/* Правило живое, хотя в разметке плашки атрибута disabled нет: flash() ставит его
   на две секунды, пока кнопка «Копировать» показывает результат или причину
   отказа. Без правила кнопка эти две секунды выглядит нажимаемой. */
.kb-tile-btn[disabled] { opacity: 0.6; cursor: default; }

.kb-tile--archived { background: var(--b24-bg); border-style: dashed; }
.kb-tile--archived .kb-tile-title,
.kb-tile--archived .kb-tile-preview { color: var(--b24-text-light); }
.kb-tile-flag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--b24-bg);
  color: var(--b24-text-light);
}

.kb-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--b24-text);
  margin: 0 0 10px;
  padding-left: 10px;
}
.kb-section-title--step      { border-left: 4px solid var(--b24-primary); }
.kb-section-title--objection { border-left: 4px solid var(--b24-orange); }
.kb-section-title--regfee    { border-left: 4px solid var(--b24-green); }
.kb-section-title--template  { border-left: 4px solid var(--b24-purple); }
.kb-section-title--fact      { border-left: 4px solid var(--b24-text-light); }

/* ─── Правая колонка: список семинаров и карточка (задача 8) ────────────────
   Тот же язык, что у .kb-tile и соседей (.kb-sections, .kb-field,
   .kb-dialog-actions) —
   переиспользуем их напрямую (заголовок плашки, кнопки, поля формы), а не
   заводим параллельный набор классов с теми же самыми свойствами. Ниже —
   только то, для чего в существующих классах нет аналога: плашка семинара
   без цветной полосы раздела, однострочная серая сводка и ссылки на
   преподавателей. Цвета — те же литералы, что уже в файле выше, новых нет. */

/* Рамка заметнее, чем у плашки скрипта (var(--b24-border)): плашки семинаров стоят в
   один столбец во всю ширину половины экрана, и на белом фоне соседние плашки
   сливались в сплошное полотно — глазу не за что зацепиться, где кончается
   один семинар и начинается следующий. У плашки скрипта той же беды нет: их
   четыре в ряд, границу рисуют промежутки по бокам. var(--b24-border-strong) — не новый цвет, а
   тот, что до этого включался здесь только под курсором.

   Раз рамка покоя забрала прежний цвет наведения, подсветке нужен признак
   сильнее: синяя рамка и синий фон вместо смены серого на серый. Тень
   оставляем — она приподнимает плашку, а не только перекрашивает.

   Фон var(--b24-primary-soft), а не общий для кнопок var(--b24-bg): этот же серый стоит в
   .kb-tile-btn:hover, и кнопка «Открыть» под курсором на такой плашке
   перестала бы отличаться от неё. */
.kb-sem-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 10px;
  border: 1px solid var(--b24-border-strong);
  border-radius: 8px;
  background: var(--b24-white);
  cursor: pointer;
}
.kb-sem-tile:hover {
  border-color: var(--b24-primary);
  background: var(--b24-primary-soft);
  box-shadow: 0 2px 8px rgba(31, 43, 56, 0.08);
}
.kb-sem-tile:focus-visible { outline: 2px solid var(--b24-primary); outline-offset: 2px; }

/* Серая строка под заголовком — «методичка: 14 плашек», в одну строку с
   обрезкой: это сводка, а не абзац текста, как превью у блока. */
.kb-sem-meta {
  font-size: 13px;
  line-height: 1.4;
  color: var(--b24-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Вторая такая же строка на плашке семинара — «Ведут: Иванов Иван, Петров
   Пётр». Единственная строка плашки, которой разрешено занять две. Заведена
   при колонке в 400px, где имена заказчика (до 27 знаков — «Караваева Елена
   Вячеславовна») не помещались ни вдвоём, ни поодиночке с подписью. Колонка с
   тех пор выросла до половины экрана, но право на вторую строку остаётся
   страховкой: узкое окно внутри Битрикс24 и семинар, который ведут трое, никуда
   не делись. Обрезка по двум строкам — тот же приём, что у .kb-tile-preview и
   .kb-tile-title выше. white-space: normal нужен отдельно, чтобы перебить
   nowrap выше: без него вторая строка просто не начнётся, и обрезка останется
   однострочной. */
.kb-sem-meta--who {
  margin-top: 2px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Та же строка в плашке преподавателя, но из двух кусков с разной судьбой:
   «Кандидат экономических наук, 18 лет в продажах · ведёт 3 семинара». Одним
   текстом многоточие срезало хвост, то есть счётчик; строка ≈370px, запас у
   длинных регалий был ≈60px. Во флексе ужимаются только регалии: min-width: 0
   снимает автоминимум (иначе кусок держит свою ширину и за край лезет счётчик),
   а flex: none у счётчика оставляет его целым. Тот же приём, что у даты и
   кнопки в подвале плашки, — см. .kb-tile-when. */
.kb-sem-meta--split { display: flex; }
.kb-meta-grow {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-meta-keep { flex: none; }

/* Кнопок в подвале плашки семинара стало три («Открыть», «Для цен», «Изменить»),
   и в узкой колонке они складываются почти во всю её ширину. Текст на кнопке
   обрезать нечем — ужимается вместо них дата (.kb-tile-when, flex: 1), а когда и
   этого мало, ряд переносится на вторую строку, а не вылезает за край плашки. */
.kb-sem-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ─── Списки правой колонки: строками ───────────────────────────────────────
   Семинары и преподаватели показываются строками — всегда, без переключателя.
   Плашками там смотреть обзор было удобно (у семинара сразу видно и методичку,
   и кто ведёт), но колонка нужна для другого: найти глазами нужный из 93
   семинаров. Строка втрое ниже плашки, и на экран их помещается втрое больше.
   Кнопка «Списком» рядом с поиском убрана по просьбе заказчика: выбор, которым
   пользуются один раз, всё равно занимает место в строке поиска постоянно.

   Класс меняет только обёртку — сами плашки собирает та же функция и та же
   разметка (.kb-sem-tile), которой рисуются карточка и панель чата. Отдельная
   разметка под список разошлась бы с ней содержимым: правку дописали бы в одну
   и забыли во второй.

   Подсветка строки под курсором — не украшение: строки идут вплотную, без
   промежутков, и глаз теряет, на какой именно он стоит, а кнопки «Открыть» и
   «Изменить» стоят в конце строки, далеко от названия в её начале. Цвет тот
   же, что у плашки под курсором. Тень здесь снимаем: внутри общей рамки списка
   она выглядела бы обрывком. */
.kb-rows {
  display: flex;
  flex-direction: column;
  margin: 0 0 22px;
  border: 1px solid var(--b24-border-strong);
  border-radius: 8px;
  background: var(--b24-white);
  overflow: hidden;
}
.kb-rows .kb-sem-tile {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--b24-border);
  border-radius: 0;
}
.kb-rows .kb-sem-tile:first-child { border-top: 0; }
.kb-rows .kb-sem-tile:hover { background: var(--b24-primary-soft); box-shadow: none; }

/* Название — главное в строке, ему и отдаём вдвое больше места, чем сводке.
   Одна строка с многоточием вместо двух: в списке все строки обязаны быть
   одной высоты, иначе он перестаёт читаться как список. */
.kb-rows .kb-tile-title {
  flex: 2 1 0;
  min-width: 0;
  margin-bottom: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-rows .kb-sem-meta { flex: 1 1 0; min-width: 0; margin-top: 0; }
/* Дата запуска — то, по чему список выстроен: ужиматься ей нельзя. Подпись
   «Ближайшая дата: » здесь убираем: даты стоят столбцом и объясняют себя сами,
   а 16 знаков подписи в каждой строке (замерено ≈105px) отбирали бы место у
   сводки о методичке — в колонке 684px ей оставалось 83px, то есть «метод…». */
.kb-rows .kb-sem-meta--run { flex: none; }
.kb-rows .kb-run-label { display: none; }
/* «Ведут: …» в строку не помещается: три имени заказчика по 27 знаков съели бы
   её целиком, а вместе с ней и сводку о методичке. Имена никуда не делись — они
   в карточке семинара, куда ведёт кнопка «Открыть», и в разделе
   «Преподаватели». */
.kb-rows .kb-sem-meta--who { display: none; }
.kb-rows .kb-tile-foot { flex: none; margin-top: 0; padding-top: 0; border-top: 0; }
/* Дата последней правки карточки — самая мелкая надпись подвала, и в строке она
   спорила бы за место с датой запуска, по которой список выстроен. Остаётся в
   карточке семинара. */
.kb-rows .kb-tile-when { display: none; }

.kb-sem-head { margin-bottom: 4px; }

/* Карточка семинара на чтение — тот же короб, что у .kb-prices, тем же цветом
   и отступом, но без таблицы внутри. */
.kb-sem-card {
  border: 1px solid var(--b24-border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--b24-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kb-sem-card .kb-field { margin-bottom: 0; }
.kb-sem-card .kb-field > div { white-space: pre-wrap; }
.kb-sem-card-title { margin: 0; }

/* Имя семинара слева, «Скопировать всё» справа. align-items: flex-start —
   длинное название переносится в две строки, и кнопка должна остаться у
   первой, а не съехать к середине короба. */
.kb-sem-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.kb-sem-copy { flex: none; }

/* Строка справки, пришедшая плашкой, открывается нажатием. Подсветка нужна,
   чтобы это было видно: без неё строка ничем не отличается от соседних полей
   карточки, которые не открываются никуда. Отрицательные поля растягивают
   подсветку на отступы короба — иначе она обрывается по краю текста. */
.kb-field--open {
  cursor: pointer;
  border-radius: 6px;
  margin: -4px -8px;
  padding: 4px 8px;
}
.kb-field--open:hover { background: var(--b24-bg); }
.kb-field--open:focus-visible { outline: 2px solid var(--b24-primary); outline-offset: 1px; }

.kb-empty-inline { color: var(--b24-text-light); }

.kb-sem-teacher { color: var(--b24-primary); text-decoration: none; }
.kb-sem-teacher:hover { text-decoration: underline; }
.kb-sem-teacher--archived { color: var(--b24-text-light); }

.kb-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
}

/* Чек-лист внутри формы: преподаватели в карточке семинара — десятки строк,
   семинары в карточке преподавателя — под сотню. Без ограничения по высоте
   такой список выдавливает кнопку «Сохранить» далеко за нижний край: форму
   видно, а сохранить её нечем. */
.kb-pick-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  padding: 2px 10px;
}

.kb-sem-hint { font-size: 12px; color: var(--b24-text-light); margin-top: 6px; }

/* ─── Окно предпросмотра методички (задача 10) ───────────────────────────── */

/* Спрятано до первой загрузки файла. На деле окном распоряжается инлайновый
   стиль: #kb-preview объявлен в разметке с display:none, и открывает-закрывает
   его тоже инлайн — таблица стилей инлайну не соперник. Правило здесь на случай,
   если инлайновый стиль потеряется: пустое окно во весь экран закрыло бы вкладку
   собой, и до списка семинаров руководитель бы не добрался. */
.kb-preview { display: none; }

/* Кусок методички — короб того же цвета, что карточка семинара: это ещё не
   плашка базы знаний, а заготовка, и выглядеть как готовая плашка ей рано. */
.kb-preview-chunk {
  border: 1px solid var(--b24-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--b24-bg);
}
.kb-preview-chunk-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.kb-preview-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--b24-text-light);
  white-space: nowrap;
}
/* Заголовок тянется, выбор раздела — по содержимому: заголовки правят чаще,
   и место на экране нужнее им. */
.kb-preview-title {
  flex: 1;
  min-width: 180px;
  padding: 7px 10px;
  font: inherit;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
  box-sizing: border-box;
}
.kb-preview-type {
  padding: 7px 10px;
  font: inherit;
  border: 1px solid var(--b24-border);
  border-radius: 6px;
}
/* Текст куска показывается как есть, с переносами файла: по ним и видно, туда
   ли разбор поставил границу раздела. */
.kb-preview-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--b24-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 160px;
  overflow-y: auto;
}
.kb-preview-mode label { display: block; padding: 4px 0; font-size: 14px; }

/* ─── Вкладка «Сайт» ───────────────────────────────────────────────────────
   Тот же язык, что у карточки семинара: короб .kb-sem-card цветом var(--b24-bg),
   подписи .kb-field, мелкая серая строка .kb-tile-when. Своего вида у вкладки
   нет — она часть той же колонки, и выглядеть должна её частью. */
.kb-site-status {
  border: 1px solid var(--b24-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--b24-bg);
}
.kb-site-live { font-size: 14px; color: var(--b24-text); }

.kb-site-keys { margin-bottom: 18px; }
/* Ключ — 20 знаков без пробелов, и читать его глазами приходится по знакам:
   моноширинный шрифт для того и нужен, чтобы отличить 0 от O и l от 1. */
.kb-site-key { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.kb-site-hint { font-size: 12px; color: var(--b24-text-light); margin: -6px 0 10px; }

/* Строка про список страниц: текст тянется, кнопка и остаток обращений — по
   содержимому. Остаток уходит на свою строку (width: 100%): он подпись к
   кнопке, а не третий равноправный кусок. */
.kb-site-pages {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--b24-text);
}
.kb-site-pages > div { flex: 1 1 240px; min-width: 0; }
.kb-site-pages .kb-tile-when { width: 100%; }

.kb-site-counts {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--b24-text);
}

/* Строка сопоставления: семинар сверху, под ним страница или причина. Двумя
   столбцами не делаем — причина бывает в полторы строки, и в узкой колонке
   она резалась бы ровно там, где начинается объяснение. */
.kb-site-row {
  border-top: 1px solid var(--b24-border);
  padding: 8px 2px;
  font-size: 14px;
}
.kb-site-row:first-child { border-top: 0; }
.kb-site-row-name a { color: var(--b24-primary); text-decoration: none; }
.kb-site-row-name a:hover { text-decoration: underline; }
.kb-site-row-page { color: var(--b24-text-light); font-size: 13px; margin-top: 2px; }
/* Причина — не ошибка: серый, как остальные пояснения колонки. Красным она
   читалась бы как поломка пульта, а это обычное «на сайте такой страницы нет». */
.kb-site-row-why { color: var(--b24-text-light); font-size: 13px; margin-top: 2px; }
.kb-site-row .kb-sem-actions { margin-top: 6px; }

/* Похожие страницы — подсказка, а не выбор: тем же серым, что и причина, но
   чуть отступив, чтобы читалось как продолжение объяснения. */
.kb-site-row-hint { color: var(--b24-text-light); font-size: 12px; margin-top: 2px; }

/* Форма со ссылкой. Поле во всю ширину колонки: ссылка длинная, и в узкое поле
   её конец не помещался бы — а проверять глазами приходится именно конец. */
.kb-site-link { margin-top: 8px; }
.kb-site-url {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--b24-border-strong);
  border-radius: 6px;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.kb-site-url:focus { outline: none; border-color: var(--b24-primary); }
.kb-site-link .kb-site-hint { margin: 6px 0 8px; }
.kb-site-link .kb-error { margin-bottom: 8px; }

/* Замок на вкладке «Сайт»: подпись рядом с названием, не вместо него. */
.kb-section-lock { margin-left: 5px; font-size: 11px; opacity: .75; }

/* Окно пин-кода. Узкое: в нём одно поле, и во всю ширину диалога оно выглядело
   бы как поле для длинного текста, а не для четырёх цифр. */
.kb-pin { max-width: 420px; }
.kb-pin-input {
  width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--b24-border-strong);
  border-radius: 6px;
  font-size: 18px;
  letter-spacing: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.kb-pin-input:focus { outline: none; border-color: var(--b24-primary); }