/* ============================================================
   glossary.css — страница /slovar «Простыми словами».
   Живёт на site.css: токены палитры (--sand, --sage, --ink…) берутся
   оттуда, своих цветов файл не вводит. Подсказки на карточке товара —
   отдельный блок в конце components.css (glossary-tip.js).
   Высота липкой шапки приходит переменной --az-sticky-h (ставит
   glossary.js), от неё считается scroll-margin-top якорей и оглавления.
   ============================================================ */

/* ── Хиро: заголовок, подзаголовок, поиск, чипы групп ── */
.gl-hero { padding-bottom: 4px; }
.gl-hero .container { grid-template-columns: 1fr; }
/* grid-ячейка хиро: без min-width:0 лента чипов (nowrap на телефоне) распирала
   её до своей полной ширины — страница уезжала вбок на 1849px */
.gl-hero__inner { min-width: 0; }
.gl-hero__sub { max-width: 660px; }
.gl-hero__meta { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }

.gl-search { position: relative; margin-top: 26px; max-width: 720px; }
.gl-search__icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; stroke: var(--sage-dark); fill: none; stroke-width: 2;
  stroke-linecap: round; pointer-events: none;
}
.gl-search__input {
  width: 100%; height: 60px; padding: 0 58px 0 52px;
  border: 1.5px solid var(--ivory-line); border-radius: 18px; background: #fff;
  font: 600 18px 'Manrope', sans-serif; color: var(--ink); outline: none;
  box-shadow: 0 14px 34px -22px rgba(43,43,38,.35);
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none; appearance: none;
}
.gl-search__input::-webkit-search-cancel-button, .gl-search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.gl-search__input::placeholder { color: var(--ink-soft); font-weight: 500; }
.gl-search__input:focus { border-color: var(--sage); box-shadow: 0 0 0 4px var(--sage-light), 0 14px 34px -22px rgba(43,43,38,.35); }
.gl-search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px;
  color: var(--ink-soft); font-size: 24px; line-height: 1; cursor: pointer; display: none;
}
.gl-search.has-value .gl-search__clear { display: grid; place-items: center; }
.gl-search__clear:hover { background: var(--sand); color: var(--ink); }

.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gl-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px;
  border-radius: 12px; border: 1px solid var(--hair); background: rgba(255,255,255,.78);
  font: 600 14px 'Manrope', sans-serif; color: var(--ink); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.gl-chip:hover { background: #fff; border-color: var(--sage); color: var(--sage-dark); }
.gl-chip.is-active { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.gl-chip__n { font-size: 12px; font-weight: 700; color: var(--sage-dark); background: var(--sage-light); border-radius: 8px; padding: 2px 7px; line-height: 1.4; }
.gl-chip.is-active .gl-chip__n { background: rgba(255,255,255,.18); color: #fff; }

/* ── Раскладка: липкое оглавление слева, список справа ── */
.gl-body { padding-top: 22px; }
.gl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.gl-toc {
  display: none; position: sticky; top: calc(var(--az-sticky-h, 150px) + 18px);
  /* Слева внизу висят плавающие кнопки связи (site.js: звонок + мессенджеры) —
     без ограничения высоты они ложились поверх нижних пунктов оглавления.
     Держим список выше их полосы, длинный список скроллится внутри себя. */
  max-height: calc(100vh - var(--az-sticky-h, 150px) - 118px); max-height: calc(100dvh - var(--az-sticky-h, 150px) - 118px);
  overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px;
}
.gl-toc__title { font: 700 11.5px 'Manrope', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px 12px; }
.gl-toc__list { display: grid; gap: 2px; }
.gl-toc__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; padding: 8px 12px; border-radius: 10px;
  font: 600 14px/1.3 'Manrope', sans-serif; color: var(--ink); transition: background .15s, color .15s;
}
.gl-toc__link:hover { background: var(--sand); }
.gl-toc__link.is-active { background: var(--sage-light); color: var(--sage-deep); }
.gl-toc__link span { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-soft); }
.gl-toc__ask { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--sage-deep); color: #fff; font-size: 13.5px; line-height: 1.5; }
.gl-toc__ask b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.gl-toc__ask .gl-act { margin-top: 12px; background: #fff; border-color: #fff; color: var(--sage-deep); }
.gl-toc__ask .gl-act:hover { background: var(--sand); }
@media (min-width: 1100px) {
  .gl-layout { grid-template-columns: 250px minmax(0, 840px); }
  .gl-toc { display: block; }
}

/* ── Статус поиска и «ничего не нашли» ── */
.gl-status { margin-bottom: 14px; font-size: 14.5px; color: var(--ink-soft); }
.gl-status b { color: var(--ink); }
.gl-empty { background: #fff; border: 1px dashed var(--ivory-line); border-radius: 20px; padding: 32px 24px; text-align: center; }
.gl-empty__title { font: 800 22px 'Manrope', sans-serif; letter-spacing: -.01em; }
.gl-empty__text { margin: 10px auto 0; max-width: 520px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.gl-empty .gl-actions { justify-content: center; margin-top: 18px; }
.gl-loading { color: var(--ink-soft); font-size: 15px; padding: 20px 0; }

/* ── Группа терминов ── */
.gl-group { scroll-margin-top: calc(var(--az-sticky-h, 150px) + 12px); }
.gl-group + .gl-group { margin-top: 48px; }
.gl-group.is-hidden, .gl-term.is-hidden { display: none; }
.gl-group__title {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font: 800 clamp(22px, 2.4vw, 28px)/1.15 'Manrope', sans-serif; letter-spacing: -.01em;
  padding-bottom: 12px; border-bottom: 2px solid var(--sand-deep);
}
.gl-group__n { font: 600 14px 'Manrope', sans-serif; color: var(--ink-soft); }

/* ── Карточка термина ── */
.gl-term {
  position: relative; background: #fff; border: 1px solid var(--hair); border-radius: 20px;
  padding: 24px 26px; margin-top: 16px;
  scroll-margin-top: calc(var(--az-sticky-h, 150px) + 16px);
  box-shadow: 0 10px 30px -24px rgba(43,43,38,.35);
  transition: box-shadow .35s, border-color .35s;
}
.gl-term.is-target { border-color: var(--sage); box-shadow: 0 0 0 4px var(--sage-light), 0 18px 40px -24px rgba(43,43,38,.35); }
.gl-term__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.gl-term__name { font: 800 22px/1.2 'Manrope', sans-serif; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.gl-term__name a { color: inherit; }
.gl-term__name a:hover { color: var(--sage-dark); }
.gl-term__count {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px;
  font: 600 12.5px 'Manrope', sans-serif; color: var(--sage-dark); background: var(--sage-light);
  border-radius: 9px; padding: 0 10px; white-space: nowrap;
}
.gl-term__short { margin-top: 10px; font: 600 17px/1.5 'Manrope', sans-serif; color: var(--ink); }
.gl-term__text { margin-top: 12px; font-size: 15px; line-height: 1.65; color: #45453F; }
.gl-term__label { display: block; font: 700 11.5px 'Manrope', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }

.gl-kinds { margin-top: 16px; background: var(--ivory); border: 1px solid var(--ivory-line); border-radius: 14px; padding: 14px 16px 15px; }
.gl-kinds__title { font: 700 11.5px 'Manrope', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--sage-dark); }
.gl-kinds__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 20px; }
.gl-kinds__item { position: relative; padding-left: 15px; font-size: 14.5px; line-height: 1.55; color: #45453F; }
.gl-kinds__item::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.gl-kinds__name { display: block; font-weight: 700; color: var(--ink); }

.gl-tip { display: flex; gap: 12px; margin-top: 14px; background: var(--sand); border-radius: 14px; padding: 13px 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.gl-tip svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gl-tip b { display: block; font: 700 11.5px 'Manrope', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }

.gl-term__foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ivory-line); display: flex; flex-direction: column; gap: 10px; }
.gl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-act {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px;
  border-radius: 12px; font: 700 14px 'Manrope', sans-serif; border: 1px solid var(--hair);
  background: #fff; color: var(--sage-deep); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.gl-act svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-act:hover { background: var(--sand); border-color: var(--sage); }
.gl-act--primary { background: var(--sage); border-color: var(--sage); color: #fff; }
.gl-act--primary:hover { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.gl-related { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; color: var(--ink-soft); }
.gl-rel {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--sage-light); color: var(--sage-deep); font: 600 13px 'Manrope', sans-serif;
  transition: background .15s, color .15s;
}
.gl-rel:hover { background: var(--sage); color: #fff; }
.gl-aliases { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.gl-aliases b { font-weight: 600; }
mark.gl-hl { background: #FBEBC4; color: inherit; border-radius: 3px; padding: 0 1px; }

/* ── Мобильный ── */
@media (max-width: 768px) {
  .gl-hero { padding-top: 22px; }
  .gl-search { margin-top: 18px; }
  .gl-search__input { height: 54px; font-size: 16px; padding-left: 46px; border-radius: 15px; }
  .gl-search__icon { left: 14px; width: 20px; height: 20px; }
  /* восемь чипов столбиком отодвигали первый термин на 2,5 экрана —
     на телефоне это одна лента с горизонтальной прокруткой (внутри себя,
     страница вбок не едет) */
  .gl-chips {
    margin-top: 14px; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -24px; margin-right: -24px; padding: 2px 24px 6px; scroll-padding-left: 24px;
  }
  .gl-chips::-webkit-scrollbar { display: none; }
  .gl-chip { flex: 0 0 auto; white-space: nowrap; }
  .gl-body { padding-top: 12px; }
  .gl-group + .gl-group { margin-top: 36px; }
  .gl-term { padding: 18px 16px 16px; border-radius: 16px; }
  .gl-term__name { font-size: 19px; }
  .gl-term__short { font-size: 16px; }
  .gl-term__text { font-size: 14.5px; }
  .gl-kinds { padding: 12px 14px 13px; }
  .gl-kinds__list { grid-template-columns: 1fr; }
  .gl-rel { min-height: 42px; }
  .gl-act { flex: 1 1 auto; justify-content: center; }
  .gl-empty { padding: 26px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-term, .gl-chip, .gl-act, .gl-rel { transition: none; }
}