/* Справка «Что такое Ложкабот» — слово с пунктиром и попап при наведении (главная, блок «Что такое Ложкабот» на страницах
   сайта). Разметка — одна, в index.html (webchat/seo/pages.py берёт её оттуда). Вынесено из app.css 06.11.2026 */
/* «Ложкабот» в надзаголовке — подчёркнут пунктиром; наведение, фокус с клавиатуры или тап — справка: что это и чем отличается.
   Класс свой (lz-whatis): .lz-about — поле «О себе» в профиле, его отступы раздували слово */
.lz-whatis { position: relative; cursor: help; outline: none }
/* Пунктир рисуем сами (точки фоном): Safari не понимает сокращённый text-decoration с цветом и толщиной */
.lz-whatis__word { position: relative; padding-bottom: .12em }
.lz-whatis__word::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 245, 240, .65) 50%, transparent 50%) 0 0 / 6px 2px repeat-x }
.lz-whatis.is-open .lz-whatis__word::after, .lz-whatis:focus-visible .lz-whatis__word::after { background-image: linear-gradient(90deg, #8FD6CF 50%, transparent 50%) }
.lz-whatis__pop { position: absolute; left: 50%; top: calc(100% + 14px); z-index: 20; width: min(560px, 92vw); padding: 18px 18px 14px; border-radius: 18px;
  transform: translate(-50%, 6px); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; text-align: left;
  background: rgba(22, 26, 52, .96); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px rgba(4, 5, 14, .6);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #F7F5F0; font: 400 13.5px/1.45 'Onest', var(--rb-font-body); cursor: default }
.lz-whatis.is-open .lz-whatis__pop, .lz-whatis:focus-visible .lz-whatis__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0) }
@media (hover: hover) {
  .lz-whatis:hover:not(.is-shut) .lz-whatis__word::after { background-image: linear-gradient(90deg, #8FD6CF 50%, transparent 50%) }
  .lz-whatis:hover:not(.is-shut) .lz-whatis__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0) }
}
.lz-whatis.is-shut .lz-whatis__pop { opacity: 0; visibility: hidden }
.lz-whatis__pop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px }   /* мостик — курсор доходит до справки */
.lz-whatis__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: rgba(247, 245, 240, .8); font: 400 22px/1 var(--rb-font-body); cursor: pointer; transition: background .15s, color .15s }
.lz-whatis__close:hover { background: rgba(255, 255, 255, .16); color: #fff }
.lz-whatis__close:focus-visible { outline: 2px solid var(--land-mint, #8FD6CF); outline-offset: 1px }
.lz-whatis__title { display: block; margin: 0 40px 10px 0; font: 600 16px/1.3 'Onest', var(--rb-font-body) }
.lz-whatis__points { display: grid; gap: 6px; margin-bottom: 14px }
.lz-whatis__points { gap: 8px }
.lz-whatis__points > span { display: flex; gap: 11px; align-items: center; color: rgba(247, 245, 240, .88); font-size: 14.5px }
.lz-whatis__points svg { flex: none; width: 24px; height: 24px; color: #C9B8FF }
.lz-whatis__grid { display: grid; font-size: 12.5px }
.lz-whatis__grid > span { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid rgba(255, 255, 255, .08) }
.lz-whatis__pop:has(.lz-whatis__grid--5) { width: min(640px, 92vw) }
.lz-whatis__grid--5 > span { grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)) }   /* пять соперников (brands/<бренд>/index/whatis.html) */
.lz-whatis__grid > span.h { border-top: 0; color: rgba(247, 245, 240, .6); font-weight: 500 }
.lz-whatis__grid > span > span { padding: 7px 5px; text-align: center; display: flex; align-items: center; justify-content: center }
.lz-whatis__grid > span > span:first-child { justify-content: flex-start; text-align: left; color: rgba(247, 245, 240, .82); padding-left: 0 }
.lz-whatis__grid .me { background: rgba(201, 184, 255, .1); color: #F7F5F0; font-weight: 600 }
.lz-whatis__grid i { font-style: normal; font-weight: 700; line-height: 1 } .lz-whatis__grid .n { font-size: 1.12em } .lz-whatis__grid .y { color: #8FD6CF } .lz-whatis__grid .n { color: rgba(255, 138, 107, .85) }
.lz-whatis__grid small { color: rgba(247, 245, 240, .55); font-size: 11px; line-height: 1.25; hyphens: auto }
/* Телефон: справка — лист снизу экрана, закрывается крестиком или тапом мимо */
@media (max-width: 760px) {
  .lz-whatis__pop { position: fixed; left: 10px; right: 10px; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; max-height: 80dvh; overflow-y: auto;
    transform: translateY(12px); padding: 16px 14px 10px; font-size: 13.5px }
  .lz-whatis.is-open .lz-whatis__pop, .lz-whatis:focus-visible .lz-whatis__pop { transform: none }
  .lz-whatis__pop::before { display: none }
  .lz-whatis__grid { font-size: 12px }
  /* таблица — как на компьютере: подписи строк первой колонкой; не влезла — листается вбок, подписи стоят на месте */
  .lz-whatis__grid { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none }
  .lz-whatis__grid::-webkit-scrollbar { display: none }
  .lz-whatis__grid > span { min-width: 470px; grid-template-columns: 132px repeat(4, minmax(78px, 1fr)) }
  .lz-whatis__grid--5 > span { min-width: 548px; grid-template-columns: 128px repeat(5, minmax(80px, 1fr)) }   /* пять соперников: иначе шестая ячейка уезжала на новую строку */
  .lz-whatis__grid > span > span { padding: 8px 4px }
  .lz-whatis__grid > span > span:first-child { position: sticky; left: 0; z-index: 1; padding-left: 0; padding-right: 8px; background: #161A34 }
  .lz-whatis__grid.is-scrolled > span > span:first-child { box-shadow: 8px 0 10px -8px rgba(4, 5, 14, .9) }
  .lz-whatis__grid i { font-size: 15px }
  .lz-whatis__grid > span.h > span { font-size: 11px; padding-inline: 2px }
  .lz-whatis__grid small { font-size: 10.5px }
}