/* К-247 — подсказки после первого входа (правка заказчика 06.10, Б28; правки 04.10, шаги В.11 и В.12): окно #kTour по шагам
   «вид сайта → цвет сайта → сотрудники». Разметку строит app/tour.js поверх общего окна .modal (app.css); плитки вида — skinpick
   (skins.css), плитки цвета — colorpick (colorpick.css). Подложка светлее обычной: выбранный вид и цвет сразу видны за
   окном. Цели не меньше 44 × 44 px через 8 px; без цветных полос слева и картинок. */
.ktour { z-index: 80; background: rgba(20, 19, 17, 0.3); }
.ktour__box { width: min(620px, 100%); box-shadow: 0 18px 48px rgba(20, 19, 17, 0.32); }
/* фокус ставится в само окно, чтобы заголовок и пояснение прочитались целиком: рамка фокуса нужна кнопкам, а не окну */
.ktour__box:focus { outline: none; }
.ktour__n { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #55524C; }
.ktour__lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #23221F; }
/* шаг «сотрудники» (шаг В.12): плиток нет — второй абзац пояснения, что понадобится для аккаунта сотрудника */
.ktour__note { margin: 0; font-size: 14px; line-height: 1.5; color: #55524C; }
.ktour .skinpick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ktour .skinpick__t { min-height: 44px; font: inherit; color: #23221F; border-radius: 8px; }
/* плитка под указателем не приподнимается: иначе промежуток до соседней плитки становится меньше 8 px */
.ktour .skinpick__t:hover { transform: none; }
.ktour .skinpick__t:focus-visible { outline: 3px solid #1764B0; outline-offset: 3px; }
.ktour .skinpick__t > b { font-size: 14px; }
.ktour .skinpick__h { font-size: 12px; opacity: 1; color: #55524C; }
.ktour .colorpick__name { font-size: 12px; }
.ktour__foot { flex-wrap: wrap; gap: 8px; }
.ktour__foot .btn { min-height: 44px; }
@media (max-width: 560px) {
  .ktour { padding: 8px; }
  .ktour__box { max-height: 94svh; }
  /* плитка вида — строкой: схема раскладки слева, название и пояснение справа */
  .ktour .skinpick { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ktour .skinpick__t { grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; }
  .ktour .skinpick__t .pv { grid-row: 1 / span 2; }
  .ktour .skinpick__t > b { align-self: end; }
  .ktour .skinpick__h { align-self: start; }
  /* 16 цветов — четыре ряда по четыре: все схемы на одном экране телефона, без прокрутки окна */
  .ktour .colorpick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ktour .colorpick__sample { height: 40px; }
  .ktour .colorpick__name { font-size: 11px; overflow-wrap: anywhere; }
  .ktour__foot .btn { flex: 1 1 100%; }
}