@import url('https://fonts.gstatic.com' crossorigin);

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ═══════════════════ Шкала размеров шрифта ═══════════════════════════════
   Одна шкала-токенов на всё приложение. Единицы — rem (1rem = 16px при
   стандартной настройке браузера): «размер шрифта» в настройках браузера /
   TWA масштабирует весь текст сайта, чего px не давали.
   Каждый токен — clamp(мин, смещение + vw, макс): минимум держится на
   телефонах до 360px, максимум — от 480px (планшет/десктоп), а МЕЖДУ 360 и
   480px ВСЕ токены плывут на одном и том же интервале — иерархия уровней
   (label < small < ui < body < lead) одинакова на любой ширине. Раньше у
   каждого токена был свой интервал, и на 390px small=body=14, ui=15 —
   вторичный текст не отличался от основного, кнопки были крупнее текста.
   Средний телефон (375–412px): label 11.2 · small 13.3 · ui 14.2 · body 14.5
   · lead 15.8 · serif-m 21.8. От 1024px sans-токены на шаг крупнее (медиа-
   блок ниже): 16px на 27" мониторе мелко.
   На низком экране кегль НЕ уменьшается — экономим интерлиньяж и отступы
   (см. медиа-блок ниже), а не буквы.
   Cormorant Garamond при равном кегле визуально мельче Jost (низкая
   x-высота) — у него свои токены на ~15% крупнее sans-токенов той же роли.
   Мелкий серый (даты, счётчики шапки, строка сессии, подписи под кнопками)
   — --fs-meta (11–12px) и цвет --c-muted-text: прежний #9A8E84 на бежевом
   фоне даёт контраст 2.7:1 (норма 4.5:1), а при 9–11px это не читалось;
   #9A8E84 остаётся иконкам, декору и серому тексту ОТ 13px.
   Таблица «px → токен» для inline-стилей в разметке и JS:
     9–12px серый → --fs-meta · 10px UPPERCASE-ярлык → --fs-label ·
     11–12px → --fs-small · 13–15px → --fs-body ·
     Cormorant 13–15px → --fs-serif-s, 22–24px → --fs-serif-m,
     34px → --fs-serif-xl · поля ввода → --fs-input (16px: iOS Safari не
     приближает страницу при фокусе в поле с кеглем меньше 16px).
   Вне шкалы осознанно: холст карты (.map-container, SVG-разметка, print —
   масштабируется зумом), бейджи-кружки с фиксированной стороной (9px в
   кружке 13–14px), подписи «нет превью» внутри миниатюр.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* — sans: Jost / Roboto Flex / Georgia — */
  --fs-micro:    clamp(0.625rem,   0.4375rem + 0.833vw, 0.6875rem); /* 10→11  подпись-предупреждение под полем заметок */
  --fs-meta:     clamp(0.6875rem,  0.5rem   + 0.833vw, 0.75rem);    /* 11→12  мелкий серый: даты, счётчики, подписи  */
  --fs-label:    clamp(0.6875rem,  0.5rem   + 0.833vw, 0.75rem);    /* 11→12  UPPERCASE-ярлыки, вопрос области       */
  --fs-small:    clamp(0.8125rem,  0.625rem + 0.833vw, 0.875rem);   /* 13→14  вторичный текст, бейджи                 */
  --fs-ui:       clamp(0.875rem,   0.6875rem + 0.833vw, 0.9375rem); /* 14→15  кнопки, пункты меню                    */
  --fs-body:     clamp(0.875rem,   0.5rem   + 1.667vw, 1rem);       /* 14→16  основной текст, фразы карточки         */
  --fs-lead:     clamp(0.9375rem,  0.375rem + 2.5vw,   1.125rem);   /* 15→18  ведущий абзац / подпись заголовка      */
  --fs-input:    1rem;                                              /* 16     поля ввода и textarea                  */
  /* — serif: Cormorant Garamond — */
  --fs-serif-s:  clamp(1rem,       0.8125rem + 0.833vw, 1.0625rem); /* 16→17  подпись карточки, заголовок секции     */
  --fs-serif-m:  clamp(1.3125rem,  0.75rem  + 2.5vw,   1.5rem);     /* 21→24  заголовок экрана / модалки             */
  --fs-serif-l:  clamp(1.625rem,   0.875rem + 3.333vw, 1.875rem);   /* 26→30  приветствие                            */
  --fs-serif-xl: clamp(1.8125rem,  0.875rem + 4.167vw, 2.125rem);   /* 29→34  заголовок страницы консультации        */
  --fs-display:  clamp(2.375rem,   8vw,                3.4375rem);  /* 38→55  «Карта Совместности» (как .intro-title) */
  --lh-body: 1.5;
  --lh-text: 1.65;                           /* длинные абзацы .reg-text                   */
  /* Цвет мелкого серого текста (≤13px): 4.9:1 на #F0EBE1, 5.9:1 на белом */
  --c-muted-text: #6C635C;
  /* Зелёный акцент ДЛЯ ТЕКСТА (eyebrow модалов, «−50%», статус сессии):
     5.0:1 на панели; фирменный #8EA68C (2.4:1) остаётся иконкам, логотипу,
     рамкам и заливкам. */
  --c-accent-text: #5C6C5B;
}
/* Широкий экран: sans-токены на шаг крупнее, serif и заголовки без изменений */
@media (min-width: 1024px) {
  :root {
    --fs-micro: 0.6875rem;    /* 11 */
    --fs-meta:  0.75rem;      /* 12 */
    --fs-label: 0.78125rem;   /* 12.5 */
    --fs-small: 0.9375rem;    /* 15 */
    --fs-ui:    1rem;         /* 16 */
    --fs-body:  1.0625rem;    /* 17 */
  }
}
/* Низкий экран: кегль тот же, экономим вертикаль интерлиньяжем и отступами */
@media (max-height: 640px) {
  :root { --lh-body: 1.4; --lh-text: 1.5; }
}

/* ═══════════════════ Icon system ═════════════════════════════════════════
   Use:  <svg class="cex-icon"><use href="#i-trash"/></svg>
   Modifiers:
     .cex-icon--sm  → 14px (inline в тексте, мета)
     .cex-icon       → 18px (default, в кнопках)
     .cex-icon--lg  → 22px (тулбар, заголовки модалов)
     .cex-icon--ink → "след пера" — тонкий drop-shadow для крупных
   Цвет всегда наследуется через currentColor.
   ═══════════════════════════════════════════════════════════════════════ */
.cex-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  flex-shrink: 0;
  stroke-width: 1.75;
  color: inherit;
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
}
.cex-icon--sm { width: 14px; height: 14px; vertical-align: -2px; stroke-width: 1.85; }
.cex-icon--lg { width: 22px; height: 22px; vertical-align: -4px; stroke-width: 1.7; }
.cex-icon--ink {
  filter: drop-shadow(0 .5px 0 rgba(60, 40, 20, .12));
}
/* Деликатный hover: чуть проявляем иконку, без анимаций штриха */
button:hover > .cex-icon,
a:hover > .cex-icon,
.cex-settings-tile:hover .cex-icon,
.cex-tile:hover .cex-icon {
  opacity: .88;
}
button:active > .cex-icon,
a:active > .cex-icon {
  transform: translateY(.5px);
}
@media (prefers-reduced-motion: reduce) {
  .cex-icon { transition: none; }
  button:active > .cex-icon, a:active > .cex-icon { transform: none; }
}

/* Крутящаяся иконка на время запроса — «Обновить обзор» (btn-review-refresh,
   cexRefreshReviewSummary в map.js) и любая другая кнопка с долгим ожиданием. */
@keyframes cexIconSpin { to { transform: rotate(360deg); } }
.cex-icon-spin { animation: cexIconSpin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .cex-icon-spin { animation: none; }
}


body {
  background: #F0EBE1;
  min-height: 100vh;
  font-family: 'Georgia', serif;
  /* Отключает нативный pull-to-refresh/резиновый оттяг браузера сверху —
     иначе он конкурирует за тот же жест со своей логикой в navigation.js. */
  overscroll-behavior-y: contain;
  /* Мобильный WebKit/Blink иначе сам увеличивает шрифт в узких текстовых
     блоках («font boosting») независимо от заданного px-размера — из-за
     этого текст рядом с фиксированными по ширине элементами (например,
     .cex-switch) может неожиданно не влезать в одну строку на реальном
     телефоне, хотя в узком окне десктопного браузера всё умещается. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Правило переноса: на последней строке текста — не меньше двух слов
     (CLAUDE.md, одноимённый раздел). Наследуется всем текстом сайта; браузер
     сам не оставляет одинокое слово в конце абзаца/подписи. Второй,
     детерминированный слой того же правила — typeset.js (неразрывный пробел
     между двумя последними словами). Не переопределять на `auto`/`balance`
     у отдельных элементов без причины, записанной в CLAUDE.md. */
  text-wrap: pretty;
}
/* Курсора-пальчика на сайте нет (решение владельца): над всем, что
   нажимается, — классическая стрелка. Свои cursor: pointer в стилях и коде
   заменены на default; это правило снимает пальчик и там, где его ставит сам
   браузер (ссылки), и не даёт кнопке унаследовать ладонь контейнера (доска,
   карта). :where — нулевая специфичность: класс со своим курсором (ладонь,
   «кулачок», текстовый курсор, not-allowed у недоступного) его перебивает. */
:where(a[href], area[href], button:not(:disabled), [role="button"], [role="menuitem"], [role="option"], [role="tab"], summary,
  select:not(:disabled), input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled),
  input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled)) { cursor: default; }
/* Галочки на сайте — одного зелёного цвета (решение владельца), включая те,
   у которых своего класса нет (отзыв «можно показать другим» и т.п.).
   :where — нулевая специфичность: свой accent-color у класса перебивает. */
:where(input[type="checkbox"]) { accent-color: #8EA68C; }
/* Исключение из правила переноса (решение владельца): тексты меню и плашек переносятся
   обычным образом, без «не меньше двух слов на последней строке». Тот же
   список меню исключён и в typeset.js (SKIP_SEL) — менять оба места вместе. */
.cex-dropdown-menu,
.cex-dropdown-menu-btn,
.intro-map-menu,
.nav-menu-role-menu,
[role="menu"],
[role="menuitem"],
/* Плашки (решение владельца): плитки разделов и инфоплашки сводок админки.
   Раздел «Задачи» целиком (список и правка задачи) и выпадающие списки
   фильтров — тоже. */
.cex-settings-tile,
.cex-admin-stat-grid,
#scr-admin-tasks,
#scr-admin-task,
#scr-admin-whiteboard,
#scr-admin-task-links,
.cex-filter-menu {
  text-wrap: wrap;
}

body.jm-active {
  overflow: hidden;
}

.map-outer {
  /* Клик по бежевому полю вокруг карты приближает/отдаляет её (doToggleZoom в
     map.js), им же карту таскают при увеличении — курсор-ладошка. Дети со
     своим курсором (поля ввода, кнопки) его не наследуют. */
  cursor: grab;
  overflow: auto;
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  position: relative;
  background: #F0EBE1;
  overscroll-behavior: contain;
}
/* Карта схвачена мышью — кулачок, и над картой тоже, а не только над бежевым
   полем: у карточек и зон приближения свой cursor:grab, поэтому перебиваем его
   у всех потомков. Класс ставится на mousedown и снимается на mouseup
   (initMapPinchZoom в map.js); на полях ввода и кнопках он не ставится. */
.map-outer.cex-map-dragging,
.map-outer.cex-map-dragging * { cursor: grabbing !important; }
/* Удержание (палец/кнопка мыши) — временное приближение (initMapPinchZoom,
   map.js): лупа вместо ладошки, долгое нажатие не вызывает выделение и
   системное меню. */
.map-outer.cex-map-hold-zoom,
.map-outer.cex-map-hold-zoom * { cursor: zoom-in !important; }
.map-outer { -webkit-touch-callout: none; }
/* На карте в 100% (без .cex-zoomed-in, ставит applyAnimated) и на время
   удержания текст карточек не выделяется: долгое нажатие пальцем иначе
   начинало выделение и сбрасывало приближение (touchcancel). */
.map-container:not(.cex-zoomed-in),
.map-container:not(.cex-zoomed-in) *,
.map-outer.cex-map-hold-zoom .map-container,
.map-outer.cex-map-hold-zoom .map-container * {
  -webkit-user-select: none !important;
  user-select: none !important;
}
.map-outer::-webkit-scrollbar { display: none; }

@media print {
  #cex-overlay, #jm-pdf-bar, #jm-header, #interviewer-modal { display: none !important; }

  /* All siblings of #jm-wrapper removed from flow (belt+suspenders with JS) */
  body > *:not(#jm-wrapper) { display: none !important; }

  @page { size: A4 portrait; margin: 0; }

  html {
    margin: 0 !important; padding: 0 !important;
    background: white !important;
    overflow: hidden !important;
    height: 297mm !important;
    max-height: 297mm !important;
  }

  body {
    margin: 0 !important; padding: 0 !important;
    background: white !important;
    overflow: hidden !important;
    /* Explicit A4 height constrains document to 1 page */
    height: 297mm !important;
    max-height: 297mm !important;
    width: 210mm !important;
    /* Positioned parent for absolute #jm-wrapper */
    position: relative !important;
  }

  /* position:absolute (NOT fixed) — fixed repeats on every page in Chrome/Android */
  #jm-wrapper {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    display: flex !important;
    flex-direction: column !important;
    background: white !important;
    padding: 5mm !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #print-header     { order: 0; flex-shrink: 0; }
  .map-outer        { order: 1; flex: 1 1 auto; }
  #print-footer-bar { order: 2; flex-shrink: 0; }

  .map-outer {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
    /* Must be tall enough to contain the scaled map without clipping */
    min-height: 0 !important;
  }

  .map-container {
    /* transform:scale renders at full resolution then scales — preserves pixel-perfect circles */
    zoom: 1 !important;
    transform: scale(0.588) !important;
    transform-origin: top center !important;
    /* Collapse the excess layout space that transform:scale leaves behind:
       horizontal: (1286 × 0.412) / 2 ≈ 265px per side
       vertical:   1293 × 0.412 ≈ 533px at bottom                          */
    margin-left:   calc(1286px * (1 - 0.588) / -2) !important;
    margin-right:  calc(1286px * (1 - 0.588) / -2) !important;
    margin-bottom: calc(1293px * (1 - 0.588) * -1) !important;
    box-shadow: none !important;
    border: none !important;
    will-change: auto !important;
    position: relative !important;
    width: 1286px !important;
    height: 1293px !important;
  }

  .sticker   { box-shadow: none !important; filter: none !important; }
  .card      { box-shadow: none !important; filter: none !important; }
  .red-input { box-shadow: none !important; }
  .stiky-index {
    position: absolute !important;
    left: 9px !important; top: 19px !important;
    width: 18px !important; height: 18px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: 'Roboto Flex', sans-serif !important;
    font-size: 6px !important; font-weight: 700 !important;
    color: rgba(80,40,30,0.7) !important;
    pointer-events: none !important;
    z-index: 4 !important; line-height: 1 !important;
  }
  .stiky {
    overflow: visible !important;
  }
  .stiky-circle {
    position: absolute !important;
    width: 18px !important; height: 18px !important;
    min-width: 18px !important; min-height: 18px !important;
    max-width: 18px !important; max-height: 18px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 999px !important;
    background: #F1B59E !important;
    left: 9px !important; top: 19px !important;
    flex-shrink: 0 !important;
    box-sizing: content-box !important;
    padding: 0 !important; border: none !important;
    transform: none !important;
  }
  .sticker:hover { filter: none !important; }

  #print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #CEC4B8;
    margin-bottom: 8px;
    width: 100%;
  }
  #print-header-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px; font-weight: 600;
    letter-spacing: 0.06em; color: #28231E;
  }
  #print-header-logo em { color: #8EA68C; font-style: normal; }
  a#print-header-logo { text-decoration: none; }
  #print-psych-line-value a { color: #28231E; text-decoration: underline; }
  #print-header-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.06em; color: #5A5049;
    text-align: right;
  }
  #print-header-name { display: none; }

  #print-footer-bar {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 6px 0 0 0;
    border-top: 1px solid #CEC4B8;
    margin-top: 8px;
    width: 100%;
    gap: 18px 18px;
  }
  #print-review-wrap,
  #print-note-wrap,
  #print-psych-note-wrap,
  #print-psych-line-wrap {
    display: flex; align-items: baseline; gap: 6px;
    width: 100%; flex-basis: 100%;
    padding-top: 4px;
    border-top: 0.5px solid #EDE6DA;
  }
  #print-review-label,
  #print-note-label,
  #print-psych-note-label,
  #print-psych-line-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
    white-space: nowrap; flex-shrink: 0;
  }
  #print-review-value,
  #print-note-value,
  #print-psych-note-value,
  #print-psych-line-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  /* Обзор — многострочный текст с заголовками разделов (map.js,
     _cexComposeReviewHtml → _cexReviewTextToPlain): переводы строк сохранить. */
  #print-review-value { white-space: pre-line; }
  #print-period-wrap { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
  #print-period-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
  }
  #print-period-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  #print-duration {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
    flex-shrink: 0;
  }
  #print-duration span {
    display: inline; font-family: 'Cormorant Garamond', serif;
    font-size: 13px; text-transform: none;
    letter-spacing: 0; color: #28231E; font-weight: 400;
  }
  #print-code-wrap { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; }
  #print-code-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
  }
  #print-code-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  #print-interviewer-wrap { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
  #print-interviewer-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
  }
  #print-interviewer-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  #print-date {
    font-family: 'Jost', sans-serif;
    font-size: 11px; color: #9A8E84;
    flex-shrink: 0;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Solo client — read-only map: cursor only; interactions blocked via JS _canEditMap() guards */
.map-container.map-readonly { cursor: default; }
.map-container.map-readonly .ph-span { cursor: default !important; }
.map-container.map-readonly .stiker-img,
.map-container.map-readonly .sticker { pointer-events: none !important; cursor: default !important; }

/* Клик по карточке приближает её (историческая карта / «Устройство карты» /
   «Устройство карточки», см. cex-map-zoomable в auth.js и initMapPinchZoom
   в map.js) — курсор-ладошка (grab) над всей карточкой сигнализирует эту
   возможность. Ладошка, а не стрелка: стрелка у нас означает «нажать здесь и
   что-то произойдёт» (кнопка, выбор фразы), а приближение/отдаление — это
   работа с самой картой, как перетаскивание.
   .ph-span выше (строка 290) переопределяет курсор в readonly на default —
   здесь возвращаем ладошку и над фразами тоже: сама фраза по клику ничего не
   делает (не кликабельна в этом режиме, см. map.js), но курсор должен
   оставаться тем же самым, что и над остальной карточкой — единым для всей
   функции приближения, без «дыр» посреди карточки. */
.map-container.cex-map-zoomable [data-jm] { cursor: grab; }
.map-container.cex-map-zoomable .ph-span { cursor: grab !important; }
/* Итоговая карта психолога до карандаша «Редактировать карту»: фразы не
   выбираются, клик по ним приближает/отдаляет карточку — та же ладошка
   (класс ставит _cexConfigureMapForContext, auth.js). Остальная карта живая,
   поэтому ладошка только над фразами. */
.map-container.cex-phrases-locked .ph-span { cursor: grab !important; }
/* «Чистая» карта («Устройство карты») открыта обычным пользователем — не
   психологом — и несёт класс .cex-client-solo, который выше по файлу гасит
   pointer-events и красит курсор в default у фраз и силуэта (строки 960-964):
   в реальном соло-режиме это верно (своя итоговая карта не редактируется),
   но здесь курсор должен быть той же ладошкой, что и над остальной карточкой. */
.map-container.cex-map-zoomable.cex-client-solo .ph-zone .ph-span {
  pointer-events: auto !important; cursor: grab !important;
}
.map-container.cex-map-zoomable.cex-client-solo .stiky-img,
.map-container.cex-map-zoomable.cex-client-solo .stiky { cursor: grab !important; }

/* Режим обзора и редактирования живой карты (НЕ cex-map-zoomable — там курсор
   уже единый над всей карточкой, см. выше): у «смысла» (.ph-resource) и
   «критической ситуации» (.ph-crisis .ph-section-title) рука обычно означает
   «клик приблизит/отдалит карту» — но если результат клика был бы холостым,
   рука вводит в заблуждение. cex-card-zoomed/cex-zoomed-in выставляются в
   map.js (_cexSetZoomedCard, applyAnimated) при каждом реальном приближении. */
.map-container:not(.cex-map-zoomable) .card.cex-card-zoomed .ph-resource .ph-section-title,
.map-container:not(.cex-map-zoomable) .card.cex-card-zoomed .ph-resource .ph-cell {
  cursor: default;
}
.map-container:not(.cex-map-zoomable):not(.cex-zoomed-in) .ph-crisis .ph-section-title {
  cursor: default;
}

.map-container,
.cex-map-snapshot {
  /* Ладошка с .map-outer (зум по бежевому полю) внутрь самой карты не течёт:
     курсор наследуется, а белое поле карты по клику зум не меняет (в живой
     карте оно переключает цвета стикеров). Зоны приближения внутри карты
     ставят себе ладошку сами — см. .cex-map-zoomable и .ph-section-title. */
  cursor: default;
  position: relative;
  width: 1286px;
  height: 1293px;
  transform-origin: 0 0;
  background: white;
  border: none;
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.map-container.stickers-hidden .sticker { background: transparent !important; }

/* ====== Title badge ====== */
.map-badge { z-index: 10;
  position: absolute;
  left: 40px; top: 4px;
  width: 111px; height: 30px;
  background: white;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #3a3535;
  font-weight: 600;
  z-index: 10;
}

/* ====== STICKER — 284×284 background square ====== */
.sticker {
  position: absolute;
  width: 284px;
  height: 284px;
  background: white;
  cursor: default;
  z-index: 1;
  /* Multi-layer drop shadow matching the SVG filter */
  box-shadow:
    0 2.5px 2px rgba(14,15,14,0.02),
    0 3px 5px rgba(14,15,14,0.04),
    0 8px 10px rgba(14,15,14,0.08);
  transition: background 0.2s ease;
}

.sticker:hover { filter: brightness(0.985); }

/* ====== Card ====== */
.card {
  position: absolute;
  width: 242px;
  height: 242px;
  border-radius: 20px;
  background: #F5EEE1;
  z-index: 2;
  box-shadow: -10.74px 2.15px 16.65px rgba(14,15,14,0.7);
  overflow: visible;
}
.card.row4 { background: #F5EEE0; }

/* ── Hover highlight from axis labels — sticker background tint ── */
.sticker.mkp-hl { background: rgba(142,166,140,0.35) !important; }

/* ====== Card header ====== */
.card-header {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 91px;
  border-radius: 20px 20px 0 0;
}

.row1 .card-header { background: #C5C5B3; }
.row2 .card-header { background: #8EA68C; }
.row3 .card-header { background: #ADC9BB; }
.row4 .card-header { background: #88ADAC; }

/* ====== Stiky band (FFFFF5) — NOT clickable for color ====== */
.stiky {
  position: absolute;
  left: 0; right: 0; top: 91px;
  height: 54px;
  background: #FFFFF5;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* circle number badge */
.stiky-circle {
  position: absolute;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  max-width: 18px; max-height: 18px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: #F1B59E;
  left: 9px;
  top: 19px;
  pointer-events: none;
  z-index: 3;
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 0;
  border: none;
}

.stiky-index {
  position: absolute;
  left: 9px; top: 19px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 6px; font-weight: 700;
  color: rgba(80,40,30,0.7);
  pointer-events: none;
  z-index: 4;
  line-height: 1;
}

/* ====== Head silhouette image (clickable trigger) ====== */
.stiky-img {
  margin-left: auto;
  width: 51px; height: 54px;
  flex-shrink: 0;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.stiky-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.8;
  pointer-events: none;
  display: block;
}

.stiky-img.active img { opacity: 0.4; }

/* ====== Separator & bottom zone ====== */

.content-zone {
  position: absolute;
  left: 0; right: 0; top: 145px; bottom: 0;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}


/* ====== Red square — input field over head image ====== */
.red-input {
  display: none;
  position: absolute;
  /* positioned relative to .card */
  width: 70px; height: 70px;
  right: -20px;          /* extends by border-radius (20px) past right edge of card */
  top: 83px;             /* just above stiky band (stiky starts at ~91px) */
  background: #FFAFA3;
  z-index: 20;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  animation: popIn 0.15s ease;
}
.red-input.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes popIn {
  from { opacity:0; transform: scale(0.85); }
  to   { opacity:1; transform: scale(1); }
}

.red-textarea {
  width: 100%;
  height: auto;
  max-height: 100%;
  border: none; outline: none;
  background: transparent;
  padding: 2px 7px;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: #3a3535;
  border-radius: 3px;
  text-align: center;
  box-sizing: border-box;
  cursor: text;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  overflow: hidden;
}
.red-textarea:empty::before {
  content: attr(data-placeholder);
  color: rgba(80,50,40,0.45);
  font-size: 9px;
  pointer-events: none;
}


/* ═══ Phrase table overlay ═══════════════════════════════════════════════════
   z-index:4 — sits UNDER SVG text overlay (z-index:5, pointer-events:none).
   SVG text renders on top; click events pass through SVG to ph-span elements.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer table: matches card 242×242, dashed border ── */
.ph-table {
  position: absolute;
  top: 0; left: 0;
  width: 242px; height: 242px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: none;
  border-radius: 20px;
}

/* ── Zone rows: heights match card zone boundaries ── */
.ph-zone {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.ph-zone.ph-crisis {
  height: 91px;
  border-radius: 20px 20px 0 0;
  border-bottom: none;
}
.ph-zone.ph-stiky {
  height: 54px;
  border-bottom: none;
}
.ph-row1 .ph-zone.ph-stiky {
  border-bottom: none;
}
.ph-zone.ph-resource {
  height: 97px;
  border-radius: 0 0 20px 20px;
}

/* ── Zone category tag (large font label, faint but legible) ── */
.ph-zone-tag {
  position: absolute;
  left: 19px;
  font-size: 6px;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: transparent;
  pointer-events: none;
  white-space: nowrap;
}
.ph-crisis  .ph-zone-tag { top: 3px; left: 19px; right: 19px; text-align: center; }
.ph-stiky   .ph-zone-tag { top: 4px; left: 30px; }
.ph-resource .ph-zone-tag { top: 3px; left: 19px; right: 19px; text-align: center; }



/* ── Inner divider between title sub-zone and phrase sub-zone ── */
/* crisis: at 38px (= ph-cell top); resource: at 36px (= ph-cell top) */
/* ── Inner divider — exact SVG y positions ──
   Header line:  y_rel=40px  (SVG line at card_top+40, all rows)
   Content line: y_rel=52px  (SVG line at card_top+197 = content_zone_top+52) ── */
.ph-inner-divider {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: none;
  pointer-events: none;
}
.ph-crisis   .ph-inner-divider { top: 40px; }
.ph-resource .ph-inner-divider { top: 52px; }

/* ── Разделительные линии внутри карточек ── */
.card-divider { position:absolute; height:0; border-top:0.537px solid #3A3535; pointer-events:none; }

/* ── «Создание карты вручную»: аспекты карточек, которые видны на карте ─────
   Список-галочки над картой (#jm-aspects-bar, _cexApplyManualAspects в map.js)
   ставит на .map-container класс cex-asp-off-<ключ> за каждый снятый аспект.
   Снятый аспект уходит вместе со своим полем (черта зоны пропадает), а
   оставшийся в той же зоне занимает её целиком и крупнеет — карточка остаётся
   собранной, а не «с дыркой»:
   • критическая ситуация / трудности — верхняя цветная зона (91px): одно без
     другого встаёт по центру зоны, заголовок 15→19px; фразы без заголовка
     подгоняются под всё поле (_cexFitManualAspectPhrases, map.js);
   • смысл / опоры — нижняя зона (97px): смысл один — по центру всей зоны,
     шрифт смысла не меняется никогда (решение владельца); опоры одни — тем
     же подгоном на всю зону;
   • помощник / тёмный профиль / индекс — белая полоса (54px): без помощника
     уходят его фразы, без тёмного профиля — силуэт «образа другого» с его
     красным полем (фразы занимают и его место); без обоих уходит всё
     центральное поле (белый фон), верх и низ делят карточку поровну (по 94px — раздел по центру), а
     индекс крупнеет 18→34px и встаёт слева на линию раздела (у края карточки
     — внутри поля); без индекса фразы помощника занимают и его место слева.
   Убрано ВСЁ в зоне — карточка теряет само поле (решение владельца): верх или
   низ уходят целиком, карточка становится ниже и встаёт по центру своей
   клетки, а без подложек карточки собираются вплотную в матрицу (классы
   cex-asp-top-/mid-/bot-/all-gone, cex-asp-idx-big, cex-asp-matrix и размеры
   --asp-* ставит _cexApplyManualAspects); углы оставшихся полей скругляются
   по краю карточки. */
#jm-aspects-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 6px 12px;
  background: #F5EEE1;
  border-bottom: 1.5px solid #E8E0D4;
}
#jm-aspects-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; white-space: nowrap;
  font-size: var(--fs-body);
}
#jm-aspects-menu .jm-asp-item { display: flex; align-items: center; gap: 10px; }
.jm-asp-box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #8A7F74;
  border-radius: 4px;
  background: #FFFDF8;
  color: #FFFDF8;
  box-sizing: border-box;
}
.jm-asp-box.is-on { background: #5A5049; border-color: #5A5049; }
.jm-asp-box .cex-icon { width: 13px; height: 13px; stroke-width: 3; }
.jm-asp-box:not(.is-on) .cex-icon { visibility: hidden; }

/* Верхняя зона: критическая ситуация (заголовок) и трудности (фразы). */
.map-container.cex-asp-off-crisis .ph-crisis .ph-section-title,
.map-container.cex-asp-off-hard   .ph-crisis .ph-cell,
.map-container.cex-asp-off-crisis .card-divider-crisis,
.map-container.cex-asp-off-hard   .card-divider-crisis { display: none; }
.map-container.cex-asp-off-hard:not(.cex-asp-off-crisis) .ph-crisis .ph-section-title { bottom: 0; font-size: 19px; }
.map-container.cex-asp-off-crisis:not(.cex-asp-off-hard) .ph-crisis .ph-cell { top: 6px; bottom: 6px; font-size: 11px; }

/* Нижняя зона: смысл (заголовок) и опоры (фразы). */
.map-container.cex-asp-off-meaning  .ph-resource .ph-section-title,
.map-container.cex-asp-off-supports .ph-resource .ph-cell,
.map-container.cex-asp-off-meaning  .card-divider-resource,
.map-container.cex-asp-off-supports .card-divider-resource { display: none; }
.map-container.cex-asp-off-supports:not(.cex-asp-off-meaning) .ph-resource .ph-section-title { height: var(--asp-bot, 97px); line-height: calc(var(--asp-bot, 97px) - 5px); }
.map-container.cex-asp-off-meaning:not(.cex-asp-off-supports) .ph-resource .ph-cell { top: 10px; bottom: 12px; font-size: 11px; }

/* Подложки карточек (квадраты-стикеры под карточками, .sticker) — без них
   карточки стоят прямо на фоне карты; место в раскладке остаётся. */
.map-container.cex-asp-off-sticker .sticker { visibility: hidden; }

/* Белая полоса: помощник (фразы, силуэт, красное поле) и индекс. */
.map-container.cex-asp-off-helper  .ph-stiky .ph-cell,
.map-container.cex-asp-off-profile .stiky-img,
.map-container.cex-asp-off-profile .red-input,
.map-container.cex-asp-off-index   .stiky-circle,
.map-container.cex-asp-off-index   .stiky-index { display: none !important; }
.map-container.cex-asp-off-index:not(.cex-asp-off-helper) .ph-stiky .ph-cell { left: 19px; font-size: 10px; }
/* Без тёмного профиля фразы помощника занимают и его место справа. */
.map-container.cex-asp-off-profile:not(.cex-asp-off-helper) .ph-stiky .ph-cell { right: 19px; }
.map-container.cex-asp-mid-gone .stiky { background: transparent; }

/* Поля, из которых убрано всё: карточка ужимается до оставшихся и стоит по
   центру своей клетки. */
.map-container.cex-asp-geo .card { height: var(--asp-h); margin-top: calc((242px - var(--asp-h)) / 2); }
.map-container.cex-asp-geo .card-header,
.map-container.cex-asp-geo .ph-zone.ph-crisis { height: var(--asp-top); }
.map-container.cex-asp-geo .ph-zone.ph-resource { height: var(--asp-bot); }
.map-container.cex-asp-geo .ph-zone.ph-stiky { height: var(--asp-mid); }
.map-container.cex-asp-geo .stiky { top: var(--asp-mid-top); height: var(--asp-mid); }
.map-container.cex-asp-geo .content-zone { top: var(--asp-bot-top); }
.map-container.cex-asp-geo .ph-table { height: var(--asp-h); }
.map-container.cex-asp-geo .card-divider-resource { transform: translateY(calc(var(--asp-bot-top) - 145px)); }
/* Один низ с индексом: поле сверху, полоса индекса под ним. */
.map-container.cex-asp-idx-below .ph-zone.ph-resource { order: -1; }
.map-container.cex-asp-geo .red-input { top: calc(var(--asp-top) - 8px); }
.map-container.cex-asp-top-gone .card-header,
.map-container.cex-asp-top-gone .ph-zone.ph-crisis,
.map-container.cex-asp-bot-gone .content-zone,
.map-container.cex-asp-bot-gone .ph-zone.ph-resource { display: none; }
.map-container.cex-asp-all-gone .card { display: none; }
.map-container.cex-asp-top-gone .stiky { border-radius: 20px 20px 0 0; }
.map-container.cex-asp-bot-gone .stiky { border-radius: 0 0 20px 20px; }
.map-container.cex-asp-top-gone.cex-asp-bot-gone .stiky { border-radius: 20px; }
.map-container.cex-asp-bot-gone.cex-asp-mid-gone .card-header { border-radius: 20px; }
/* Без подложек — матрица: карточки сходятся к центру прежней сетки с
   одинаковым зазором по обеим осям (сдвиги --asp-dxN/--asp-dyN по столбцу и
   строке считает _cexApplyManualAspects). */
.map-container.cex-asp-matrix .card[data-jm$="c1"] { --asp-cx: var(--asp-dx1); }
.map-container.cex-asp-matrix .card[data-jm$="c2"] { --asp-cx: var(--asp-dx2); }
.map-container.cex-asp-matrix .card[data-jm$="c3"] { --asp-cx: var(--asp-dx3); }
.map-container.cex-asp-matrix .card[data-jm$="c4"] { --asp-cx: var(--asp-dx4); }
.map-container.cex-asp-matrix .card[data-jm^="r1"] { --asp-cy: var(--asp-dy1); }
.map-container.cex-asp-matrix .card[data-jm^="r2"] { --asp-cy: var(--asp-dy2); }
.map-container.cex-asp-matrix .card[data-jm^="r3"] { --asp-cy: var(--asp-dy3); }
.map-container.cex-asp-matrix .card[data-jm^="r4"] { --asp-cy: var(--asp-dy4); }
.map-container.cex-asp-matrix .card { translate: var(--asp-cx, 0) var(--asp-cy, 0); }
/* Без помощника индекс крупнеет и стоит слева на линии раздела полей. */
.map-container.cex-asp-idx-big .stiky-circle,
.map-container.cex-asp-idx-big .stiky-index {
  width: 34px; height: 34px;
  min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px;
  left: 12px; top: var(--asp-idx-top);
}
.map-container.cex-asp-idx-big .stiky-index { font-size: 12px; }
/* Фразы верхнего поля не заходят под крупный индекс у его нижнего края. */
.map-container.cex-asp-idx-big.cex-asp-geo .ph-zone.ph-crisis .ph-cell { bottom: var(--asp-idx-pad); }

/* ── Phrase cell — width matches SVG text zone (x_rel 35-206 = 171px) ── */
.ph-cell {
  position: absolute;
  left: 19px; right: 19px;
  font-size: 9px;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  word-wrap: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  color: transparent;
  pointer-events: none;
  text-align: center;
}
/* Crisis phrases: start 3px below the 40px inner divider */
.ph-crisis   .ph-cell { top: 43px; bottom: 3px; text-align: center;
                         display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* Helper: right-aligned, right boundary at image edge (56px from card right) */
.ph-stiky    .ph-cell { top: 0; bottom: 0; left: 30px; right: 56px;
                         display: flex; align-items: center; flex-wrap: wrap;
                         align-content: center; justify-content: flex-end;
                         text-align: right; }
/* Resource phrases: start 3px below the 52px inner divider */
.ph-resource .ph-cell { top: 55px; bottom: 3px; text-align: center;
                         display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* Section title — transparent div aligned to SVG brownish title paths */
.ph-section-title {
  position: absolute;
  left: 19px; right: 19px;
  font-family: 'Wavefont', sans-serif;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.01em;
  pointer-events: auto;
  /* Клик по заголовку зоны приближает/отдаляет карточку — курсор-ладошка, как
     и на остальных зонах приближения (см. .cex-map-zoomable выше). Там, где
     клик был бы холостым, курсор перебивается на default — строки 324-330. */
  cursor: grab;
  text-align: center;
}
.ph-crisis   .ph-section-title { top: 0; bottom: 50px; color: #3F403E; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1.01; }
.ph-resource .ph-section-title { position: absolute; top: 0; height: 52px; left: 0; right: 0; width: 100%; color: #8B645C; font-size: 24px; font-weight: 400; font-style: normal; letter-spacing: 0.04em; text-align: center; line-height: 52px; white-space: nowrap; overflow: visible; display: block; }
/* Клик по «смыслу» приближает карточку (map.js resourceTitle) — попытка
   расширить только высоту хитбокса .ph-section-title на маленьких экранах
   не помогла (52 design-px — это по-прежнему пара реальных пикселей при
   маленьком scale карты). Вместо этого открываем под клик всю зону
   .ph-resource целиком (97px, а не только заголовок) — .ph-cell ниже по
   умолчанию pointer-events:none (пропускает клики насквозь), переопределяем
   его здесь. Сами фразы (.ph-span) добавляются в DOM ПОСЛЕ .ph-cell/title
   (см. makeZone в map.js) и красятся поверх в местах пересечения — клик по
   самой фразе по-прежнему выбирает её, а не зумит карточку (см. также
   resourceTitle в map.js, который теперь не исключает .ph-cell). */
.ph-resource .ph-cell { pointer-events: auto; cursor: grab; }

/* ── Карта в режиме терминологии («На карте» из раздела понятий) ──────────
   У .ph-zone клики по умолчанию выключены (pointer-events:none) — их ловят
   только отдельные элементы вроде фраз. В этом режиме клик нужен по всей
   зоне: она и есть полюс, чьи понятия показывает модал (см. _cexBindTermsPoles
   в map.js). Стрелка — только пока карточка достаточно крупная: на мелкой клик
   приближает её, и курсор обязан остаться ладошкой (класс ph-notes-live вешает
   _cexSyncNoteCursors, map.js). */
body.cex-terms-map .ph-zone { pointer-events: auto; }
body.cex-terms-map .ph-table.ph-notes-live .ph-zone { cursor: default; }
/* ИСКЛЮЧЕНИЕ — зона «Помощника»: она НЕ ловит клики целиком, только своей
   текстовой серединой. В полосе помощника (.stiky, index.html) по краям лежат
   два СВОИХ кликабельных элемента: слева кружок (.stiky-circle, закрывает
   открытое красное поле — closeRed; свой onclick с inline pointer-events:auto
   поверх базового none), справа силуэт «значимого другого» (.stiky-img,
   toggleRed; на нередактируемой карте оба просто приближают карточку общим
   обработчиком .map-outer). Зона полюса лежит выше них (.ph-table, z-index 4),
   поэтому pointer-events:auto на всей зоне забирал бы их клики себе.
   Ни z-индексы, ни обработчики для этого трогать не нужно: у зоны уже есть
   готовая середина — .ph-cell с отступами left:30px / right:56px (см. выше,
   они и заданы под кружок 9..27px слева и силуэт 51px справа). Её и делаем
   единственной областью клика полюса, а сама зона остаётся pointer-events:none,
   как вне режима, — края полосы ведут себя как обычно. Курсор-стрелка
   наследуется из правила выше. */
body.cex-terms-map .ph-zone.ph-stiky { pointer-events: none; }
body.cex-terms-map .ph-zone.ph-stiky .ph-cell { pointer-events: auto; }

/* ── Individual phrase span: hit target with click highlight ── */
.ph-span {
  display: inline;
  color: rgba(45,28,15,0.78);
  cursor: default;
  pointer-events: auto;
  user-select: none;
  border-radius: 2px;
  padding: 0 1px;
}

/* On-state: coloured highlighter stripe sits under transparent SVG text */
.ph-crisis   .ph-span.ph-on { background: rgba(255,210,160,0.68); color: rgba(50,30,20,0.75); }
.ph-stiky    .ph-span.ph-on { background: rgba(255,210,160,0.68); color: rgba(30,50,30,0.75); }
.ph-resource .ph-span.ph-on { background: rgba(255,210,160,0.68); color: rgba(20,30,60,0.75); }
/* Gray-state: light warm tint — visible on all card backgrounds */
.ph-crisis   .ph-span.ph-gray { background: rgba(60,45,30,0.12); color: rgba(50,30,20,0.50); }
.ph-stiky    .ph-span.ph-gray { background: rgba(60,45,30,0.12); color: rgba(30,50,30,0.50); }
.ph-resource .ph-span.ph-gray { background: rgba(60,45,30,0.12); color: rgba(20,30,60,0.50); }
/* Bang-check: was ✓ → red (priority over orange) */
.ph-crisis   .ph-span.ph-bang-check { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
.ph-stiky    .ph-span.ph-bang-check { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
.ph-resource .ph-span.ph-bang-check { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }

/* ── Режим «слои глубины переживаний» ──
   Показываем подсветку ТОЛЬКО фраз текущего слоя: реальные выделения интервью
   (ph-on/gray/bang) визуально гасим, а слой подсвечиваем персиковым как «on». */
.map-container.cex-depth-view .ph-span.ph-on,
.map-container.cex-depth-view .ph-span.ph-gray,
.map-container.cex-depth-view .ph-span.ph-bang-check {
  background: transparent;
  color: rgba(45,28,15,0.78);
}
.map-container.cex-depth-view .ph-span.ph-layer { background: rgba(255,210,160,0.68); color: rgba(45,28,15,0.85); }
/* Слой «красное»: подсветка фраз — тем же красным, что и их реальная отметка. */
.map-container.cex-depth-view.cex-depth-view-red .ph-span.ph-layer { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
/* Фразы, реально отмеченные красным (ph-bang-check), остаются красными и в
   остальных слоях («Опоры», 1, 2, 3) — не перекрашиваются в персиковый вместе
   с обычными ph-on. В алгоритм подсветки такта (_cexApplyDepthLayer) они и так
   считаются наравне с персиковыми — меняется только цвет, не подсчёт. */
.map-container.cex-depth-view .ph-span.ph-bang-check.ph-layer { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }

/* Бейдж с номером текущего слоя на квадратной кнопке разметки */
.cex-depth-btn { position: relative; }
/* Бейдж внутри кнопки: выступающий за края срезался бы overflow:hidden
   контейнеров футера (#jm-markup-center / #jm-markup-nav) на узких экранах. */
.cex-depth-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 13px; height: 13px; line-height: 1;
  padding: 0 2px; border-radius: 7px;
  background: #fff; color: #6B4A2B; border: 1px solid #6B4A2B;
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 700; text-align: center;
  pointer-events: none;
  /* line-height:11px в 13px-боксе полагался на то, что браузер сам прижмёт
     строку к центру — на Android-планшете (в отличие от Android-телефона и
     остальных устройств) этого не происходит, цифра рендерится у верхнего
     края. flex-центрирование не зависит от метрик шрифта конкретного
     движка/платформы и не привязано к точному совпадению line-height с
     высотой бокса. Остаточный сдвиг вверх даже с flex — это уже не line-height,
     а асимметрия ascent/descent самого шрифта Jost (над цифрой в строке
     резервируется больше места, чем под ней) — центрируется сама строка, а не
     видимые чернила глифа. Небольшой paddingTop компенсирует эту асимметрию.
  */
  display: flex; align-items: center; justify-content: center;
  padding-top: 1px;
}
.cex-depth-badge--red { background: rgba(255,175,163,0.95); color: rgba(80,20,10,0.9); border-color: rgba(80,20,10,0.6); }
/* Крест по зелёным тактам (первый шаг кнопки глубины): фон — цвет зелёной
   подсветки такта (#B3EFBD, см. _cexTactColorFromFlags в map.js). «+» стоит
   по центру кружка: компенсация асимметрии цифр Jost (padding-top выше) ему
   не нужна, а сам знак в Jost сидит ниже средней линии — приподнимаем на 1px. */
.cex-depth-badge--cross { background: #B3EFBD; color: #2F5A3A; border-color: #5E8A66; padding-top: 0; padding-bottom: 1px; }

/* Non-clickable comma separator */
/* ── Надписи с комментарием версии («Устройство карты» и превью версии, см.
   _cexApplyVersionNoteMarks в map.js) ──────────────────────────────────────
   Метка — короткая черта под серединой надписи, а не другой цвет текста: цвет
   на карте уже занят смыслом (зона, глубина, отметки выбора), и перекрашивать
   его ради «тут есть комментарий» нельзя. Черта висит на обёртке вокруг самого
   текста (.ph-note-mark), поэтому одинаково ложится и под фразу в 9px, и под
   заголовок зоны в 24px. */
.ph-note-mark {
  position: relative;
  display: inline-block;
}
/* Черта отсчитывается от САМОГО ТЕКСТА, а не от низа обёртки: у заголовка
   «смысла» строка задана line-height:52px, и обёртка там втрое выше букв —
   черта уехала бы под низ карточки. 50% − 0.5em — это как раз нижняя грань
   кегельной площадки при любой высоте строки, дальше добавляем зазор. */
.ph-has-note .ph-note-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(50% - 0.5em - 0.06em);
  width: 14%;
  min-width: 4px;
  /* Толщина — около одного ЭКРАННОГО пикселя при любом масштабе карты:
     --cex-map-scale — масштаб, в котором карта сейчас отрисована (ставит
     зум в map.js, _setRasterScaleVar). Фиксированный 1px в разметке на
     уменьшенной карте (0.3–0.6) был субпиксельным, а во время анимации зума
     браузер показывает старый растр — линия проявлялась только по её
     окончании. */
  height: max(0.07em, calc(1.2px / var(--cex-map-scale, 1)));
  min-height: 1px;
  background: currentColor;
  opacity: 0.7;
  border-radius: 1px;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* SVG-текст на карте (подписи строк/столбцов #jm-markup-layer, подписи
   приближенной карточки) — без подгонки под экранный масштаб. Chrome
   раскладывает SVG-текст шрифтом под масштаб на экране (с учётом transform
   .map-container), а смена transform эту раскладку не обновляет. Зум ставит
   --cex-map-scale (выше) на каждом кадре, переменная наследуется в SVG, и текст
   перерисовывался по раскладке ПРОШЛОГО масштаба: подписи столбцов уезжали
   под карту и оставались там копиями («подрагивают, сдвигаются позже карты»;
   в «Как читать карту» — «призраки» подписей на карточках). С geometricPrecision
   раскладка от масштаба не зависит — подписи идут вместе с картой. Копии
   карты в сравнении («Карты целиком», .cex-map-snapshot) тоже приближаются
   transform'ом — правило и для них. */
.map-container svg text,
.cex-map-snapshot svg text { text-rendering: geometricPrecision; }
/* Под фразой — черта ОДНОЙ длины у всех фраз (фиксированная ширина в
   пикселях карты, а не доля ширины текста: у длинной и короткой фразы знак
   один и тот же) и чуть ниже текста, чем под заголовком; у перенесённой
   фразы черта только под первой частью (map.js, _cexApplyVersionNoteMarks).
   Под заголовком зоны и подписями строк/столбцов (base.css) — как было. */
.ph-cell .ph-has-note .ph-note-mark::after          { bottom: calc(50% - 0.5em - 0.3em); width: 8px; min-width: 0; }
/* «Теории»: черта «есть понятия» под заголовком полюса — тот же принцип, что
   у черты под фразой выше: одна длина у всех, чуть ниже текста, у заголовка
   с переносом — одна, под первой строкой (_cexTermsNoteMarkWrap, terms.js).
   Толщина по масштабу и показ только на приближенной карточке на телефоне —
   общие правила выше. Подписи строк/столбцов (base.css) — как были. */
body.cex-terms-map .ph-section-title.ph-has-note .ph-note-mark::after { bottom: calc(50% - 0.5em - 0.42em); width: 8px; min-width: 0; }
.ph-section-title.ph-has-note .ph-note-mark::after { bottom: calc(50% - 0.5em - 0.26em); }
/* На узком экране (телефон, планшет в портрете) черты видны только на
   ПРИБЛИЖЕННОЙ карточке — по тому же классу ph-notes-live, что включает
   стрелка (_cexSyncNoteCursors, map.js: карточка на экране ≥ 200px). На
   отдалённой карте телефона 16 карточек по 60–90px, и черты под фразами
   шириной в пару пикселей были бы шумом. На компьютере (шире 768px) черты
   видны всегда, сразу, без приближения. */
@media (max-width: 768px) {
  .ph-table:not(.ph-notes-live) .ph-has-note .ph-note-mark::after { display: none; }
}

/* Наведение и нажатие — черта наливается цветом самого текста: надпись
   отзывается на курсор, как обычная кнопка. */
.ph-has-note:hover .ph-note-mark::after,
.ph-has-note:active .ph-note-mark::after {
  opacity: 1;
}

/* ── Слой «Продуманность» (только карта черновика версии, см.
   cexToggleThoughtLayer в map.js) ─────────────────────────────────────────
   Автор помечает фразы прямо в модале комментария; здесь эти метки видны
   разом. Тона мягкие и заметно отличаются от рабочих отметок карты
   (персиковый выбор, красная «!», серая «не про меня») — чтобы разметку
   автора нельзя было спутать с работой клиента. */
.cex-thought-view .ph-span.ph-hl-green,
.cex-thought-view .ph-section-title.ph-hl-green,
.cex-thought-view .ph-note-mark.ph-hl-green,
.cex-thought-view .ph-hl-inner.ph-hl-green {
  /* Тон темнее самой карточной шапки: прежний светло-зелёный пропадал на
     зелёной полосе ряда 3.x (#8EA68C) — там подсветка была не видна вовсе. */
  background: rgba(74,110,72,0.34);
  border-radius: 3px;
}
.cex-thought-view .ph-span.ph-hl-yellow,
.cex-thought-view .ph-section-title.ph-hl-yellow,
.cex-thought-view .ph-note-mark.ph-hl-yellow,
.cex-thought-view .ph-hl-inner.ph-hl-yellow {
  background: rgba(228,196,120,0.38);
  border-radius: 3px;
}
/* Обёртка фона «Продуманности» у заголовка зоны (см. _cexThoughtTitleMark,
   map.js) — свой тесный line-height, независимый от .ph-note-mark, на
   котором держится позиция черты «есть комментарий» (.ph-note-mark::after
   выше). У заголовка «критической ситуации» .ph-note-mark и без того тесный
   (там flex-центрирование, своего line-height:52px нет) — там эта обёртка
   ничего не меняет; у заголовка «смысла» (line-height:52px) она не даёт фону
   растянуться на всю строку и красит вплотную по тексту, тем же стилем.
   Значение — ЧИСЛОМ (1.01), а не ключевым словом normal: у 'Wavefont'
   normal иногда считается заметно просторнее собственных метрик шрифта
   (наблюдалось на реальной карте — фон «Угроза жизни»/«Безопасность» тянулся
   далеко выше текста), а 1.01 — то же значение, что уже держит вплотную
   заголовок «критической ситуации» на своём line-height, и не может выйти
   просторнее его. */
.ph-hl-inner { line-height: 1.01; }
/* Та же причина у подсветки САМИХ ФРАЗ критической ситуации и смысла: их
   .ph-cell задаёт line-height:1.45 (style.css выше), и фон .ph-span тянется
   по всей высоте строки, а не по буквам 9px-текста — фраза-«марка» выглядит
   толще, чем сам текст. Тесный line-height нужен только здесь: у полюса
   «помощник» (.ph-stiky) фразы выровнены построчно во flex-обёртке, и такой
   перекос не виден. */
.cex-thought-view .ph-crisis .ph-span.ph-hl-green,
.cex-thought-view .ph-crisis .ph-span.ph-hl-yellow,
.cex-thought-view .ph-resource .ph-span.ph-hl-green,
.cex-thought-view .ph-resource .ph-span.ph-hl-yellow {
  line-height: normal;
}

/* Текст, у которого есть комментарий: стрелка вместо ладошки. По здешнему
   правилу (см. .cex-map-zoomable выше) ладошка означает «клик приблизит
   карту», стрелка — «нажать здесь, и что-то произойдёт».
   Только на достаточно крупной карточке (.ph-notes-live ставит
   _cexSyncNoteCursors в map.js): пока карточка мелкая, клик по тексту
   приближает её, а не открывает комментарий, — ладошка тут и правдива.
   !important и длинные селекторы — потому что ладошку над фразами ставят
   правила с !important. */
.ph-table.ph-notes-live .ph-span.ph-has-note,
.ph-table.ph-notes-live .ph-section-title.ph-has-note,
.map-container .ph-table.ph-notes-live .ph-span.ph-has-note,
.map-container .ph-table.ph-notes-live .ph-section-title.ph-has-note,
.map-container.cex-map-zoomable .ph-table.ph-notes-live .ph-span.ph-has-note,
.map-container.cex-map-zoomable .ph-table.ph-notes-live .ph-section-title.ph-has-note,
.map-container.cex-map-zoomable.cex-client-solo .ph-table.ph-notes-live .ph-zone .ph-span.ph-has-note,
.map-container.map-readonly .ph-table.ph-notes-live .ph-span.ph-has-note {
  cursor: default !important;
}

.ph-comma {
  display: inline;
  color: rgba(45,28,15,0.78);
  pointer-events: none;
  user-select: none;
  font-size: 9px;
  font-family: 'Roboto Flex', sans-serif;
}


/* Hide SVG phrase text paths — JS ph-table provides visible text instead.
   Keep: #3F403E WITH mask  = crisis section titles (header zone)
   Keep: #88655C WITH mask  = resource section titles (content zone)  
   Keep: #8B645C WITH mask  = resource section titles (content zone, row4)
   Hide: all without mask   = phrase body text in all three zones        */



/* Right-align split lines in helper (stiky) zone */
.ph-zone.ph-stiky .ph-cell div { text-align: right !important; }



/* ═══ CoEхpera — fully responsive styles ════════════════════════════════════ */
:root {
  --bg:#F0EBE1; --bg2:#E6DFD3; --ink:#28231E; --ink2:#5A5049;
  --ink3:#9A8E84; --border:#CEC4B8;
  --row4:#C5C5B3; --row3:#8EA68C; --row2:#ADC9BB; --row1:#88ADAC;
  --salmon:#F1B59E; --sticky-bg:#FFFFF5; --card-bg:#F5EEE1; --brown-txt:#8B645C;
  --ac1:#8EA68C; --ac2:#88ADAC; --ac3:#C5C5B3;
  --cex-btn-h: 46.5px; /* единая высота всех кнопок (.cex-btn) и сторона квадратных (.cex-icon-btn) */
  /* Размер иконки «Вводный курс» (#i-edu-cap) в слоте #nav-edu-intro-btn —
     см. комментарий там ниже. */
  --cex-icon-tour: 28px;
}

/* ── Base layout ── */
#cex-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg);
  font-family: 'Jost', sans-serif; color: #28231E; font-size: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#cex-overlay * { box-sizing: border-box; }
/* Системные полосы (решение 10.10). Страница объявлена viewport-fit=cover
   (index.html, _CEX_VP_FIT): на Android 15+ Chrome и приложение рисуют её под
   панелью навигации, на iPhone — под домашней чертой и вырезом в альбомной
   ориентации. Оба полноэкранных слоя — экраны и карта — отступают на размер
   полос, поэтому футер с кнопками всегда над ними; где полос нет, env() даёт 0.
   Новый полноэкранный fixed-слой с кнопками у края — с тем же отступом. */
#cex-overlay, #jm-wrapper {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  box-sizing: border-box;
}
.cex-screen { display: none; flex: 1; min-height: 0; flex-direction: column; }
.cex-screen.active { display: flex; }
/* Правка задачи и доска для рисования (у неё поля прямо на холсте): при
   открытой клавиатуре экран ужимается до видимой области (--cex-vvh/
   --cex-vvtop, modals.js) — футер стоит над клавиатурой, а не уходит под
   неё; поля прокручиваются внутри экрана. */
html.cex-kbd-open #scr-admin-task.active,
html.cex-kbd-open #scr-admin-whiteboard.active {
  position: fixed; left: 0; right: 0;
  top: var(--cex-vvtop, 0px); height: var(--cex-vvh, 100%);
  z-index: 50; background: #F0EBE1;
}
/* Intro buttons: always in a row. align-items:stretch (не center) — обе
   кнопки пары обязаны быть ОДНОЙ высоты: «Вводный курс» в этом же ряду умеет
   становиться двухстрочной (btn-start-session--edu-intro, выше), и без
   stretch соседняя «Устройство карты» осталась бы на однострочных 46.5px
   (--cex-btn-h) рядом с более высокой парой — заметный перепад в одной паре
   кнопок. stretch у строки автоматически подтягивает высоту КОРОТКОЙ кнопки
   до высоты высокой (а не наоборот — двухстрочная и так не может стать ниже
   своего содержимого), и делает это для любого будущего состояния, которое
   сделает одну из двух кнопок выше, без переигрывания магическими пикселями.
   Работает через уровень: сами кнопки — не прямые дети `.intro-btn-row`, а
   обёрнуты в `<span style="display:inline-flex">` (см. index.html, ради
   бейджа-цифры подсказки) — inline-flex по умолчанию сам стретчит
   единственного ребёнка, поэтому stretch с внешнего ряда доходит до кнопки
   без явного align-items на промежуточном span. */
.intro-btn-row { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:10px; width:auto; }
.intro-btn { white-space:nowrap; width:180px; }
/* «Пригласить клиента» (см. _cexApplyIntroCenterSwap, auth.js) длиннее
   «Создать карту»/«Вводный курс для психологов» и при общем .cex-btn горизонтальном padding
   (21px) не помещалась в фиксированную .intro-btn width:180px вместе со
   стрелкой — та схлопывалась в 0 (flex ужимал именно её, текст по nowrap
   ужиматься не может). Сама ширина кнопки (180px, как у «Устройство карты»
   рядом) и высота (--cex-btn-h) не меняются ни в одном из трёх состояний —
   только у ЭТОЙ кнопки уже горизонтальный запас по бокам подписи: 5px вместо
   унаследованных 21px, ровно под самую длинную из трёх подписей (подобрано
   рендер-тестом в Playwright — при 5px «Пригласить клиента» + стрелка
   помещаются в 180px без переноса и без обрезки, с равным отступом слева и
   справа). Для более короткой подписи («Создать карту») тот же меньший запас
   просто оставляет больше свободного места по бокам текста — на
   центрирование это не влияет, justify-content:center у .cex-btn и так
   центрирует контент независимо от величины padding. Третье состояние,
   «Вводный курс для психологов», в эту схему не укладывается вовсе — у него
   своя раскладка в две строки, см. #btn-start-session--edu-intro ниже. */
#btn-start-session, .intro-psych-start { padding-left: 5px; padding-right: 5px; }
/* Стрелка вплотную к тексту, без зазора — свой natural padding внутри
   viewBox иконки и так даёт небольшой воздух, дополнительный margin/пробел
   между текстом и стрелкой не нужен. */
#btn-start-session-label svg.cex-icon, .intro-psych-start-lbl svg.cex-icon { margin-left: 0; }
/* «Пригласить клиента» — надпись заметно сдвинута вправо внутри той же
   180px-кнопки: сумма боковых отступов остаётся 10px (как и в правиле выше),
   просто отдана целиком левому краю вместо равного деления 5/5 — контентная
   область по ширине не меняется, поэтому перенос/обрезка тексту не грозят
   (измерено Playwright на самом широком состоянии шрифта: право остаётся
   ~2px зазора до края кнопки). Класс ставит/снимает _cexApplyIntroCenterSwap
   (auth.js) только для режима mode==='invite'. */
#btn-start-session.btn-start-session--invite, .intro-psych-start.btn-start-session--invite { padding-left: 10px; padding-right: 0; }
/* «Вводный курс для психологов» — самая длинная из трёх подписей, даже
   уменьшенным шрифтом не помещалась в 180px на одной строке без потери
   читаемости. Вместо этого — две строки: действие сверху 12px обычным
   шрифтом кнопки, уточнение снизу 9px мелким приглушённым (см. разметку в
   _cexApplyIntroCenterSwap, auth.js) — раньше тем же приёмом, что и «Пройти
   полное интервью» (#btn-consult, index.html), пока та не вернулась к одной
   строке без уточнения. Класс ставит/снимает та же функция только для
   режима mode==='edu-intro'; ширина кнопки (180px) не меняется, как и у
   остальных двух состояний — высота у двух строк неизбежно больше
   --cex-btn-h (min-height у .cex-btn, не фиксированная высота). Саму разницу
   высот с соседней однострочной «Устройство карты» в этом же ряду
   выравнивает не эта кнопка, а родитель — align-items:stretch у
   .intro-btn-row (см. правило про высоту кнопок в одном ряду, CLAUDE.md).
   Выравнивание строк ВНУТРИ кнопки — по правилу центральных кнопок с двумя строками текста (см.
   CLAUDE.md): группа из двух строк центрирована НА КНОПКЕ (align-items:center
   здесь, на самой кнопке), а строки внутри группы прижаты друг к другу влево
   (align-items:flex-start у #btn-start-session-label ниже) — иначе в 180px
   короткая подпись «Вводный курс» висела бы у левого края с пустотой справа,
   вместо того чтобы стоять по центру кнопки. */
/* ── Intro ── */
#scr-intro { justify-content: center; align-items: center; text-align: center; padding: 0; }
.intro-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-display);
  font-weight: 400; line-height: 1.1; margin-bottom: 14px;
}
.intro-sub {
  color: #5A5049; line-height: var(--lh-body);
  max-width: 380px; margin: 0 auto 36px;
  font-size: var(--fs-lead);
}
/* Текст «Наше интервью будет…» (navigation.js, _cexApplyIntroStudentUI) —
   длинный абзац на месте короткого подзаголовка: шире общего потолка 380px
   (решение владельца — 500px). На узком экране ширину всё равно ограничивает
   сама колонка главной. */
.intro-sub.intro-sub--interview { max-width: 500px; }

/* Обёртка превью+кнопок (#intro-action-row, index.html). По умолчанию —
   просто колонка, повторяющая поведение ДО обёртки (потому и width:100%:
   иначе процентная ширина #intro-btns-client/#intro-map-pair внутри считалась
   бы от auto-ширины самой обёртки, а не от .intro-center-wrap, как раньше). */
.intro-action-row {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  /* Зазор между превью и кнопками — gap САМОГО ряда, а не margin-bottom у
     детей (как было). Разница видна только в одном месте, зато в том самом,
     ради которого весь центральный блок и строился: margin-bottom последнего
     видимого элемента входит в высоту ряда, то есть в высоту центрируемого
     содержимого, — и центрирование честно ставило по центру блок, у которого
     снизу 12px пустоты, а сверху нет. Пустого места под кнопками выходило на
     эти 12px больше, чем над заголовком. gap ставится только МЕЖДУ детьми и
     после последнего не остаётся. */
  gap: 12px;
}

/* Пока на главной открыт вопрос «Готовы начать?» перед живой сессией
   (#_ready-block, _cexShowReadyInline в sync.js) — и дальше, пока идёт
   ожидание второго участника, — превью карты и кнопки под ним не нужны:
   единственное действие на экране — «Войти». Ряд прячем целиком, а не по
   кнопке: applyRoleUI (auth.js) ставит его детям display инлайном на каждой
   перерисовке, поэтому только !important на общем контейнере держит их
   скрытыми. Блок снимается при запуске сессии (_cexLaunchLiveSession) и при
   сбросе приглашения — ряд возвращается сам. */
#scr-intro:has(#_ready-block) #intro-action-row { display: none !important; }

/* ── Зона превью карт: обе рамки + уголок, меню и свёрнутая строчка ───────
   Обёртка (#intro-map-zone, index.html) вокруг #intro-map-preview и
   #intro-map-pair. Ширина — та же, что была у самих рамок (100%, потолок
   400px), поэтому в раскладке ряда ничего не меняется: рамка внутри
   по-прежнему занимает всю ширину зоны и упирается в тот же потолок. Зона
   нужна ради троих общих детей, которым нужна точка отсчёта на ВСЮ область
   превью, какая бы из двух рамок сейчас ни стояла: уголок в правом нижнем
   углу, его меню и пустая строчка свёрнутого состояния. */
.intro-map-zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 400px;
}

/* Уголок вверх в правом нижнем углу зоны — вход в меню показа карт. Вид —
   тот же полупрозрачный тёплый кружок с размытием, что у стрелки-CTA на
   карточке анонима и у бейджей-подписей поверх картинки
   (rgba(247,242,234,.4) + blur): собственного цвета у служебного значка
   поверх карты на сайте нет. display ставит _showEl (data-display-type,
   index.html) — здесь none только как состояние по умолчанию. */
.intro-map-toggle {
  /* Отступ от края — уголок стоит В углу рамки, а не НА её скруглении: у
     рамки превью радиус 10px, и кружок вплотную к краю наезжал бы на него. */
  position: absolute; right: 5px; bottom: 5px; z-index: 3;
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(247, 242, 234, 0.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: #5A5049; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
/* stroke-width как у общего .cex-icon (style.css, начало файла): тонкая
   дефолтная линия сприта на полупрозрачной подложке почти не читается. */
.intro-map-toggle svg { width: 17px; height: 17px; stroke-width: 1.75; transition: transform .18s ease; }
/* Меню открыто — уголок смотрит вниз: значок показывает, куда приведёт
   следующий клик по нему же (закрыть), а не куда открылось меню. */
.intro-map-toggle.is-open svg { transform: rotate(180deg); }
/* Карты свёрнуты — уголок повёрнут влево: по значку видно, что на месте
   превью сейчас не пустота «так и надо», а сложенный блок. При открытом меню
   верх берёт правило выше (вниз = «клик закроет меню»): это состояние
   короткое и относится к меню, а не к картам, — отсюда :not(.is-open). */
.intro-map-zone--collapsed .intro-map-toggle:not(.is-open) svg { transform: rotate(-90deg); }

/* Уголок выбора визуальной роли в меню-домике (сотрудник и выше), слева от
   подписи роли под никнеймом (index.html, #nav-menu-role-toggle; логика —
   cexToggleViewRoleMenu в auth.js). Размер — под кегль подписи (--fs-meta),
   без рамки и фона: это часть строки роли, а не отдельная кнопка. Открыт
   список — уголок перевёрнут (как у .intro-map-toggle); при подмене роли
   (is-view-role) — зелёный, чтобы было видно, что сайт показан не своей
   ролью. */
.nav-menu-role-toggle {
  display: none;  /* inline-flex ставит _cexApplyMenuUserSub (auth.js) */
  align-items: center; justify-content: center;
  /* Уходит влево в поле шапки (padding-left 12px): подписи «пользователь»
     рядом с иконками настроек/выхода в 180px меню и так тесно. */
  flex-shrink: 0; width: 18px; height: 18px; margin-left: -9px;
  padding: 0; border: 0; background: none; cursor: default;
  color: var(--c-muted-text); line-height: 0;
}
.nav-menu-role-toggle svg {
  width: 14px; height: 14px;
  transition: transform 0.18s ease;
}
.nav-menu-role-toggle.is-open svg { transform: rotate(180deg); }
.nav-menu-role-toggle.is-view-role { color: #8EA68C; }
/* Вся строка роли — цель клика (уголок + текст), поэтому курсор-палец на ней,
   а не только на уголке. Класс ставит _cexApplyMenuUserSub сотруднику и выше:
   остальным клик ничего не делает, и палец обманывал бы. */
.nav-menu-user-role-row.is-clickable,
#nav-menu-user-role-row.is-clickable { cursor: default; }
/* Список визуальных ролей — отдельное всплывающее меню ПОВЕРХ домика, а не
   встроенный блок в нём: висит под уголком (координаты ставит
   cexToggleViewRoleMenu, auth.js), выглядит как навигационный гамбургер
   (.cex-dropdown-menu, css/modal.css: фон, рамка, радиус, тень), но лежит в
   разметке внутри #nav-hamburger-menu — закрывается вместе с ним и своего
   z-index-контекста не заводит (z-index:1 — выше соседей внутри домика).
   Пункты — те же .cex-dropdown-menu-btn, мельче; выбранная сейчас роль —
   зелёной подложкой, как «текущий» вариант в .intro-map-menu. */
.nav-menu-role-menu {
  display: none;  /* flex ставит cexToggleViewRoleMenu (auth.js) */
  position: fixed; z-index: 1;
  flex-direction: column; gap: 2px;
  width: max-content; min-width: 168px; max-width: calc(100vw - 32px);
  /* С уровнями сертификата пунктов до девяти — на низком экране прокрутка
     внутри, а не выезд за край. */
  max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: #F7F2EA;
  border: 1.5px solid rgba(206, 196, 184, 0.70);
  border-radius: 12px;
  box-shadow:
    0 2px  6px rgba(40, 35, 30, 0.06),
    0 8px 24px rgba(40, 35, 30, 0.10);
}
.nav-menu-role-menu .cex-dropdown-menu-btn {
  font-size: var(--fs-small); padding: 8px 12px; min-height: 0;
}
.nav-menu-role-menu .cex-dropdown-menu-btn.is-current {
  background: rgba(142, 166, 140, 0.16); font-weight: 600; color: #28231E;
}

/* Меню показа карт. Вид — как у навигационных гамбургеров (.cex-dropdown-menu,
   css/modal.css: тот же фон, рамка, радиус и тень), но position:absolute и
   привязка к уголку, а не fixed к футеру, поэтому свой класс, а не тот же:
   меню висит над своим уголком и ездит вместе с зоной превью. Пункты —
   обычные .cex-dropdown-menu-btn (border снимает их же правило в modal.css). */
.intro-map-menu {
  display: none;  /* flex ставит cexToggleIntroMapMenu (auth.js) */
  position: absolute; right: 5px; bottom: 38px; z-index: 12;
  flex-direction: column; gap: 2px;
  width: max-content; min-width: 200px; max-width: calc(100vw - 32px);
  /* Прокрутка внутри на коротком экране; точный потолок — cexToggleIntroMapMenu (auth.js). */
  max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: #F7F2EA;
  border: 1.5px solid rgba(206, 196, 184, 0.70);
  border-radius: 12px;
  box-shadow:
    0 2px  6px rgba(40, 35, 30, 0.06),
    0 8px 24px rgba(40, 35, 30, 0.10);
}
.intro-map-menu .cex-dropdown-menu-btn {
  font-size: var(--fs-small); padding: 9px 12px; min-height: 0;
}
/* Выбранный сейчас вариант — зелёная подложка сайта, а не галочка: пункты
   центрированы, и значок слева ломал бы их выравнивание. */
.intro-map-menu .cex-dropdown-menu-btn.is-current {
  background: rgba(142, 166, 140, 0.16); font-weight: 600; color: #28231E;
}

/* Свёрнутое состояние — вместо обеих рамок ОДНА пустая строчка во всю ширину
   зоны, и в ней тот же уголок (повёрнутый влево, см. правило выше). Раньше
   здесь было размытие поверх карт: карту оно прятало, но место на главной
   занимало ровно то же, будто ничего и не скрыли, — сворачивание отдаёт это
   место кнопкам и убирает лишнюю прокрутку на телефоне.
   Высота — под уголок (28px), это и есть «одна строчка»: собственного
   содержимого у неё нет, и мерить её больше не по чему.
   <button>, а не <div> с role=button: клавиатура и Enter/Пробел тогда
   работают сами, без своего обработчика. Внутрь рамки превью её не положить
   (кнопка в кнопке), а рядом, в зоне, — можно. */
.intro-map-expand {
  display: none;  /* block ставит _showEl (data-display-type, index.html) */
  width: 100%; height: 28px; min-height: 0;
  padding: 0; border: 0; background: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
/* В свёрнутом виде уголок стоит в самой строчке, а не в углу рамки: ни
   отступа от скругления (рамки нет), ни поправки на картинку (её тоже нет).
   Фон и здесь ПОЛУПРОЗРАЧНЫЙ, тот же, что поверх карты (правило выше): один
   и тот же значок в обоих состояниях должен и выглядеть одинаково. Пробовали
   делать его в свёрнутом виде плотнее (сплошной фон + рамка, «его же не
   видно на пустом месте») — вернули полупрозрачный: значок служебный, и
   выделяться сильнее самих кнопок главной ему незачем. */
.intro-map-zone--collapsed .intro-map-toggle { right: 0; bottom: 0; }

/* Превью карты на главной (#intro-map-preview, index.html). Оформление живёт
   здесь целиком, а не в inline-стилях разметки: на телефоне оно другое, а
   inline медиазапросом не перебить. Сам display ставит _showEl по
   data-display-type — здесь его нет. */
.intro-map-preview {
  position: relative;
  flex-direction: column; align-items: center; gap: 8px;
  width: 100%; max-width: 400px;
  padding: 12px 12px 10px; box-sizing: border-box;
  background: #F7F2EA; border: 1.5px solid #CEC4B8; border-radius: 10px;
  cursor: default; font-family: 'Jost', sans-serif;
}
/* Вошедший без единой карты — зелёная рамка вместо обычной серой: тот же
   акцент, что у карточки-кнопки анонима (#8EA68C), выделяет CTA «Создать
   свою первую карту». Класс ставит/снимает _cexRenderIntroMapPreview
   (auth.js) на каждой отрисовке превью. */
.intro-map-preview.intro-map-preview--first {
  border: 2px solid #8EA68C;
}
/* Обёртка картинки — просто точка отсчёта для position:absolute у стрелки
   (.intro-map-preview-chev, ниже): сама по себе не участвует в раскладке,
   размер берёт от .intro-map-preview-img — единственного ребёнка, который
   реально в потоке (стрелка из потока выведена). */
.intro-map-preview-imgwrap { position: relative; display: block; line-height: 0; }
.intro-map-preview-img { display: block; width: 124px; height: 124px; line-height: 0; }
/* Стрелка-кружок поверх картинки — та же кнопка, что раньше стояла рядом с
   подписью (дизайн — кружок со стрелкой `#i-chev-right` — не менялся,
   поменялись только размер и место, см. блок «Аноним — карта-кнопка» ниже,
   он и включает её обратно, большой и полупрозрачной; вошедшему без карт —
   ниже, тем же приёмом, но меньшего размера, под 124px картинку). У
   остальных веток превью (своя карта, психолог без карт) скрыта по
   умолчанию — там нужного действия «нажми, чтобы создать» нет. */
.intro-map-preview-chev { display: none; }
/* Вошедший без карт (класс .intro-map-preview--first, см.
   _cexRenderIntroMapPreview, auth.js) — то же самое предложение «нажми,
   чтобы создать», что и у истинного анонима, поэтому и стрелка та же:
   полупрозрачный кружок с блюром поверх картинки, только размер меньше —
   картинка здесь 124px, а не крупная карточка-кнопка анонима. */
.intro-map-preview--first .intro-map-preview-chev {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(40px, 15vw, 56px); height: clamp(40px, 15vw, 56px);
  border-radius: 50%;
  background: rgba(247, 242, 234, 0.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: #5A5049;
}
.intro-map-preview--first .intro-map-preview-chev svg { width: 46%; height: 46%; }
.intro-map-preview-cap {
  font-size: var(--fs-small); font-weight: 500; color: #5A5049;
  text-align: center; line-height: 1.35;
}
/* «Компактный» показ превью — рамка снята, подпись не строка под картинкой,
   а маленький бейдж поверх её верхней трети. Включается ТОЛЬКО на высоком
   узком экране (обычный телефон, `max-width:480px` и `min-height:701px`):
   картинка там растёт (см. второй блок ниже), а строка текста под ней
   сдвигала бы кнопки вниз и ломала симметрию пустого места сверху/снизу
   (#intro-center-wrap); бейдж-оверлей в высоту блока не идёт —
   .intro-map-preview получил свой position:relative выше специально под этот
   абсолют. Бейдж — едва заметная тёплая подложка (не плашка, которую сразу
   замечаешь), с лёгким размытием, а не сплошной фон: тот же принцип, что у
   пилюли-стрелки «в начало» (.cex-scroll-hint-pill, css/modal.css), но
   заметно бледнее — там пилюля сама по себе элемент интерфейса, здесь она
   вторична по отношению к картинке под ней. Две строки («Ваша карта» /
   «Создана …», см. auth.js) укладываются свободно — в отличие от прежней
   версии, здесь нет ни nowrap, ни обрезки многоточием.
   НИЗКИЙ экран ЛЮБОЙ ширины (`max-height:700px`) сюда больше НЕ входит
   (раньше входил — условие было «или»): картинка там 96px, а бейдж поверх
   такой мелкой карты закрывал её клетки и выглядел неряшливо. На низком
   экране у одиночного превью та же аккуратная рамка, что и в обычном виде
   (базовые правила .intro-map-preview выше), с подписью под картинкой
   ВНУТРИ рамки — как у пары карт (см. блок «Низкий экран ЛЮБОЙ ширины»
   ниже).
   ИСКЛЮЧЕНИЕ — истинный аноним (#scr-intro.intro--anon): у него своя,
   самостоятельная раскладка карточки-кнопки на ЛЮБОЙ ширине/высоте (см. блок
   «Аноним — карта-кнопка» в конце файла), этот блок его не трогает. */
@media (max-width: 480px) and (min-height: 701px) {
  #scr-intro:not(.intro--anon) .intro-map-preview { background: none; border: none; padding: 0; }
  /* Вошедший без единой карты — зелёная рамка вокруг превью даже в этом
     компактном виде (иначе .intro-map-preview {border:none} выше её снимает):
     тот же акцент, что у карточки-кнопки анонима (#8EA68C). Ставит/снимает
     _cexRenderIntroMapPreview (auth.js). */
  /* min-width — рамка шире картинки настолько, чтобы бейдж-подпись
     «Создать свою первую карту / Самостоятельно · ~15 мин» целиком
     помещался ВНУТРИ зелёной рамки (иначе подпись вылезала бы за её края).
     Картинка остаётся по центру (align-items:center у .intro-map-preview). */
  #scr-intro:not(.intro--anon) .intro-map-preview.intro-map-preview--first {
    border: 2px solid #8EA68C; border-radius: 10px; padding: 8px;
    min-width: 196px;
  }
  #scr-intro:not(.intro--anon) .intro-map-preview.intro-map-preview--first .intro-map-preview-cap {
    max-width: calc(100% - 12px);
  }
  #scr-intro:not(.intro--anon) .intro-map-preview-cap {
    position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%);
    /* width:max-content (не auto) обязателен именно тут: у абсолютно
       позиционированного элемента с одним заданным left (без right) браузер
       считает «доступную ширину» от точки left до правого края родителя —
       это ~половина картинки, и с width:auto текст ужимался бы к этому
       пределу (перенос по каждому слову) ещё ДО max-width, игнорируя его.
       width:max-content явно просит собственную ширину по содержимому —
       max-width всё равно сверху её ограничивает. */
    width: max-content;
    max-width: calc(100% - 16px);
    padding: 3px 9px;
    border-radius: 14px;
    background: rgba(247, 242, 234, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    font-size: var(--fs-small); line-height: 1.3;
  }
}
/* Просторный отступ под подзаголовком — лишнее место, экономим его ПРИ
   ЛЮБОЙ из причин тесноты, не только на узком телефоне: широкое, но
   невысокое окно браузера (просто потянуть его нижний край) стоит перед
   тем же выбором. Общее для всех, включая анонима. Декоративный ромб здесь
   НЕ гасится: на узком (≤ 480px) его нет совсем (правило ниже), а на
   широком, но невысоком его прячет только замер — `_cexFitIntroDiamond`
   (auth.js, класс `.intro-diamond--hidden` ниже), когда зазор между
   содержимым и хедером/футером меньше высоты кнопки; места хватает — ромб
   на месте. */
@media (max-width: 480px), (max-height: 700px) {
  .intro-sub { margin-bottom: 24px; }
}
.intro-diamond--hidden { display: none; }
/* Узкий экран: ромба на главной нет совсем, при любой высоте. Авто-показ/
   скрытие по замеру (_cexFitIntroDiamond) — только для широких экранов. */
@media (max-width: 480px) {
  #scr-intro .intro-diamond { display: none; }
}

@media (max-width: 480px) {
  /* Телефон: образец карты сам себе главный объект экрана, а не картинка
     внутри карточки. Сторона квадрата ограничена ещё и высотой экрана (vh):
     на коротком телефоне выросший квадрат иначе уводит кнопки под сгиб —
     ровно то, ради чего превью и увеличивали. Анонима не трогаем — у него
     своя, не зависящая от ширины формула размера (см. ниже). */
  .intro-action-row { gap: 16px; }
  #scr-intro:not(.intro--anon) .intro-map-preview-img { width: min(214px, 60vw * var(--cex-app-k, 1), 27vh * var(--cex-app-k, 1)); height: min(214px, 60vw * var(--cex-app-k, 1), 27vh * var(--cex-app-k, 1)); }
}

/* Телефон, ОДНА карта: рамки тут нет (правило выше её снимает), и «правый
   нижний угол области превью» — это угол самой картинки, а не всей строки во
   всю ширину экрана; иначе уголок висел бы в пустоте справа от карты. Отсчёт
   от центра: картинка центрирована, значит её правый край — половина её же
   ширины от середины, той же формулой, что и сама ширина выше. Высоту
   поправлять не нужно: подпись на телефоне — бейдж-оверлей, своей высоты не
   занимает, и низ блока совпадает с низом картинки.
   Пары это не касается (у неё рамка есть на любой ширине) — отсюда
   .intro-map-zone--single, класс ставит _cexApplyIntroMapsView (auth.js).
   min-height:701px — ниже действует «строчный» режим, там картинка 96px и
   блок и так ужат по содержимому, отдельная поправка ему не нужна. */
@media (max-width: 480px) and (min-height: 701px) {
  #scr-intro:not(.intro--anon) .intro-map-zone--single .intro-map-toggle {
    right: calc(50% - min(214px, 60vw * var(--cex-app-k, 1), 27vh * var(--cex-app-k, 1)) / 2 + 4px);
  }
}

/* Низкий экран ЛЮБОЙ ширины (не только узкий телефон — это же затрагивает и
   десктопное окно браузера, если его сделать ниже) — переключаем сам ряд в
   строку: превью налево уменьшенной иконкой, кнопки направо узкой колонкой.
   Раньше это правило требовало ЕЩЁ И max-width:480px — на широком, но низком
   окне колонка ничего не меняла, съезжала в обычную прокрутку, а рамка с
   подписью просто уезжали под сгиб вместе с кнопками. flex-wrap на самом
   ряду — на случай нехватки ширины даже в строку (широкий-но-совсем-низкий
   экран и узкий телефон): тогда просто перенесётся в два ряда — превью над
   кнопками, — а не вылезет за край.
   ДВА правила низкого экрана, одинаковые для ВСЕХ ролей (решение владельца):
   1) кнопки — друг под другом: и пара клиента (#intro-btns-client, правило
      рядом с ней ниже по файлу), и пара психолога (#intro-btns-psych — тот же
      столбец той же ширины, ниже в этом блоке);
   2) превью — и одной карты, и двух — в той же аккуратной рамке, что и в
      обычном виде: фон, рамка 1.5px, скругление и поля — базовые правила
      .intro-map-preview (у пары — те же значения inline в разметке), подпись
      ПОД картинкой внутри рамки. Безрамочный вид с бейджем-оверлеем (он
      закрывал клетки мелкой карты) остался только высокому узкому телефону —
      см. блок «Компактный показ превью» выше.
   ИСКЛЮЧЕНИЕ — истинный аноним: у него под превью нет ряда кнопок (см.
   ниже), подстраивать раскладку под них не для чего — карточка-кнопка у
   него остаётся колонкой на любой высоте, просто мельчает (см. блок «Аноним
   — карта-кнопка» в конце файла). */
@media (max-height: 700px) {
  #scr-intro:not(.intro--anon) .intro-action-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
  /* Зона превью — такой же элемент строки, как сами рамки: не растягивается
     на всю ширину, а жмётся к содержимому, иначе кнопки справа от неё в
     строке не поместятся вовсе. */
  #scr-intro:not(.intro--anon) .intro-action-row #intro-map-zone,
  #scr-intro:not(.intro--anon) .intro-action-row .intro-map-preview,
  #scr-intro:not(.intro--anon) .intro-action-row #intro-map-pair {
    width: auto !important; max-width: none !important; flex-shrink: 0;
  }
  #scr-intro:not(.intro--anon) .intro-action-row .intro-map-preview-img { width: 96px !important; height: 96px !important; }
  /* Рамка одной карты жмётся к содержимому (см. выше), а подпись под
     картинкой — две короткие строки; без нижней границы по ширине рамка
     выходила бы чуть шире подписи и уголок «как показывать карты»
     (.intro-map-toggle, правый нижний угол зоны) налезал бы на конец её
     последней строки. 232px — подпись «Создана 2 месяца назад» с запасом
     обходит уголок (28px + 5px отступа); у пары такой запас даёт ссылка под
     картинками. */
  #scr-intro:not(.intro--anon) .intro-action-row .intro-map-preview { min-width: 232px; }
  /* Кнопки психолога — столбиком, как у клиента: одной ширины, друг под
     другом. Ширина — та же, что у столбца клиента на низком экране
     (≈192px; на узком телефоне в строке рядом с превью он не уместится и
     ряд-обёртка просто перенесёт его под превью). Обёртки кнопок
     (<span style="display:inline-flex">, ради бейджа-цифры) в столбце
     растягиваются на всю ширину сами (align-items:stretch у .intro-btn-row),
     сама кнопка — на всю обёртку. */
  #intro-btns-psych, .intro-btns-psych { flex-direction: column; flex-wrap: nowrap; row-gap: 8px; width: 192px; max-width: 100%; }
  #intro-btns-psych .intro-btn, .intro-btns-psych .intro-btn { width: 100%; }
  #intro-btns-psych, #intro-btns-client, .intro-btns-psych, .intro-btns-client { min-width: 0; }
}

/* Блок входа снизу (#clerk-auth-block) — видимая нижняя граница центральной
   части: между ним и хедером и центрируется #intro-center-wrap (см. комментарий
   у обёртки в index.html). Верно, пока в блоке входа есть что показывать. Но у
   вошедшего он ПУСТ: «Войти / Зарегистрироваться» скрыто, а #clerk-signed-in
   своего содержимого не имеет вовсе. Видимой границей снизу становится футер, и
   между последним элементом центра и футером остаётся мёртвое место — ровно то,
   что блок входа и #intro-body держат под собой (padding-bottom 8px и 16px,
   inline в index.html). Расчёт центра его не видит: он считает границей блок
   входа. Отсюда и жалоба — у вошедших пустого места снизу было на эти 24px
   больше, чем сверху.
   Чиним не компенсацией сверху (она добавила бы центральной части высоты — на
   невысоком окне, где вёрстка и так помещается впритык, страница из-за этого
   уезжала бы в прокрутку), а снятием самого мёртвого места: пустому блоку
   входа отступ снизу не нужен — отступать нечему, — и обёртка честно
   центрируется в промежутке до футера. !important — оба padding’а заданы
   inline в разметке, иначе правило их не перебьёт.
   Класс ставит _cexApplyIntroLoginRowSpace (auth.js) по РЕАЛЬНОЙ видимости
   строки входа, а не по факту логина: у анонимного клиента на форме
   приглашения строка тоже скрыта (у него своя кнопка «Войти →», sync.js) —
   блок пустой ровно так же. */
#intro-body.intro-body--no-login-row { padding-bottom: 0 !important; }
#intro-body.intro-body--no-login-row #clerk-auth-block { padding-bottom: 0 !important; }

/* Блок под кнопками (#intro-session-info) пуст почти всегда, а содержимое ему
   дописывает JS (индикатор психолога, блок готовности живой сессии). Отступ
   от кнопок поэтому на нём самом и только когда есть от чего отступать: будь
   он постоянным (или margin-bottom у кнопок выше), пустой блок добавлял бы
   ту же мёртвую высоту в центрируемое содержимое и снова уводил бы симметрию
   пустого места. */
#intro-session-info:not(:empty) { margin-top: 12px; }

/* Аноним, НА ЛЮБОЙ ширине и высоте экрана: под превью карты не остаётся
   ничего — ни ряда кнопок, ни подписи-строки. Клик по самому превью ведёт в
   регистрацию — оно само выглядит кнопкой (см. блок «Аноним — карта-кнопка»
   ниже), а не рамкой с картинкой, и предложение под ним было бы тем же
   самым дважды. Раньше порог был
   ≤480px (только телефон) — правку см. в истории коммитов на 2026-09-18.
   Класс intro--anon стоит на #scr-intro В РАЗМЕТКЕ и снимается только у
   вошедшего (_cexApplyIntroClientButtons, auth.js): аноним — состояние по
   умолчанию до ответа Clerk, и ряд кнопок не должен мелькнуть у того, кому
   он не предназначен. !important — display ряду ставит _showEl инлайном. */
#scr-intro.intro--anon #intro-btns-client { display: none !important; }
/* Исключение — владелец выбрал кнопки положению «Пользователь без карт»
   («Кнопки на главной», _cexIntroBtnsResolve в auth.js): тогда ряд виден и
   анониму. Класс ставит _cexSyncIntroStartClient только вместе с показом
   ряда, поэтому умолчание («без кнопок») по-прежнему прячет его. */
#scr-intro.intro--anon #intro-btns-client.intro-btns-client--on { display: flex !important; }

/* Порядок внутри .intro-action-row — один для всех: сначала превью, под ним
   ряд кнопок, ровно как в DOM (index.html). Раньше у анонима на большом
   экране (`min-width:481px` и `min-height:701px`) кнопки поднимались НАД
   превью через `order:-1` — эту перестановку убрали: человек сначала видит, о
   какой карте речь, и только потом выбирает, как её создавать, и это верно на
   любой ширине. Отдельной перестановки левой/правой кнопки ВНУТРИ ряда здесь
   тоже нет: тёмная («Пройти полное интервью») стоит первой уже в самом DOM
   (см. #intro-btns-client, index.html). */

/* Подпись «Создать свою первую карту» + вторая строка «кто и сколько» — тот же
   вид, что был у этих двух строк на кнопке под превью (см. #btn-start-client,
   index.html): её текст сюда и переехал. Блоками, а не через <br>: второй
   строке нужен свой размер и цвет. Только у ветки «первая карта вошедшего»
   (_cexIntroFirstMapMode, auth.js) — у истинного анонима вторая строка не
   нужна вовсе, см. блок «Аноним — карта-кнопка» ниже. */
.intro-map-preview-cap .intro-cap-main,
.intro-map-preview-cap .intro-cap-sub { display: block; }
.intro-map-preview-cap .intro-cap-sub { font-size: 0.85em; color: #9A8E84; margin-top: 2px; }

/* ══ Аноним — карта-кнопка ═══════════════════════════════════════════════
   Истинный аноним (#scr-intro.intro--anon, без Clerk вовсе) — единственная
   ветка превью, у которой своя, САМОСТОЯТЕЛЬНАЯ раскладка: рамка, крупная
   картинка и та же стрелка-кружок, что раньше стояла рядом с текстом (дизайн
   кнопки не менялся — только размер и место), ПРЯМО НА картинке, большая и
   полупрозрачная — не рамка с картинкой, а сама картинка читается как
   кнопка «нажми меня», без вглядывания. На широком и на узком экране — один
   и тот же вид (колонка, картинка заметно крупнее, чем у остальных веток
   превью); на НИЗКОМ экране любой ширины (max-height:700px) карточка САМА
   переключается в строку — картинка налево, подпись направо, — это
   единственное, что меняется между «нормальным» и «низким» состоянием (см.
   обсуждение и макеты в чате 2026-09-18, серия правок от того же дня:
   сначала стрелка рядом с текстом, потом крупнее картинка + большая
   стрелка поверх неё вместо play-иконки, потом — горизонтальный вид на
   низком экране; цвет стрелки — тот же, что у бейджа-подписи на остальных
   ветках превью, см. `.intro-map-preview-chev` ниже).

   Блоки выше (медиазапросы на 480px/700px, включая переключение
   .intro-action-row в строку) анонима явно обходят (`:not(.intro--anon)`) —
   здесь не переопределение поверх них по специфичности, а полностью свой,
   самостоятельный набор правил без пересечений: переключение в строку у
   анонима — свойство САМОЙ карточки (`.intro-map-preview`), а не общего
   солвера ряда `.intro-action-row`, которым пользуются остальные ветки
   (тем нужно расположить рядом ещё и кнопки под превью, а у анонима под
   превью нет ничего).

   Единственное, что приходит СНАРУЖИ этого блока, — общие для всех веток
   вещи уровня экрана: скрытый ромб (на узком — всегда, на широком — по
   замеру зазора, `.intro-diamond--hidden`) и увеличенный отступ подзаголовка на тесном экране (см.
   `.intro-sub` в объединённом медиа-запросе выше) и полностью скрытый ряд `#intro-btns-client` (см. отдельное
   правило рядом с ним, без media — про него уже сказано там).

   Клик по карточке (см. _cexRenderIntroMapPreview, auth.js) открывает
   регистрацию на ЛЮБОЙ ширине: подпись обещает ровно то, что происходит по
   клику. */
/* Вариант 5 (с 2026-09-25, выбран из макетов): светлая карточка в
   зелёной рамке, подпись — крупная, без капса (с 2026-09-26 — не зелёная:
   Cormorant тёплого тёмного цвета сайта, см. ниже), со стрелкой в конце строки,
   которая раз в ~3 с мягко «подталкивает» вправо; картинка чуть меньше и
   приглушена — главный фокус на подписи, а не на карте. Стрелка — прежний
   полупрозрачный кружок поверх картинки (стрелку в конце подписи пробовали
   и убрали). */
#scr-intro.intro--anon .intro-map-preview {
  background: #F7F2EA; border: 2px solid #8EA68C; border-radius: 12px;
  padding: 16px; gap: 12px;
  width: 100%; max-width: 400px;
  container-type: inline-size;   /* подпись меряется шириной карточки (cqi) */
  /* Один мягкий зелёный отблеск при открытии главной — привлекает взгляд к
     кнопке, не мигая и не повторяясь (одна итерация, ощутимо мягче фона
     самой карточки, #E3ECDD — был отклонён как основной фон, а тут как раз
     к месту). */
  animation: cex-anon-card-flash 2.2s ease-in-out 0.4s 1 backwards;
  transition: background-color 0.25s ease;
}
/* Наведение мышью — тот же зелёный, что у отблеска при открытии. Заливка
   анимации — backwards, а не both: «both» держал бы последний кадр поверх
   :hover навсегда. На тач-экранах :hover не включаем — залипал бы после тапа. */
@media (hover: hover) {
  #scr-intro.intro--anon .intro-map-preview:hover { background: #E3ECDD; }
}
#scr-intro.intro--anon .intro-map-preview:focus-visible { background: #E3ECDD; }
@keyframes cex-anon-card-flash {
  0%   { background: #F7F2EA; }
  35%  { background: #E3ECDD; }
  100% { background: #F7F2EA; }
}
@media (prefers-reduced-motion: reduce) {
  #scr-intro.intro--anon .intro-map-preview { animation: none; }
}
#scr-intro.intro--anon .intro-map-preview-img {
  width: clamp(150px, 40vw * var(--cex-app-k, 1), 200px);
  height: clamp(150px, 40vw * var(--cex-app-k, 1), 200px);
  opacity: 0.85;
}
/* Стрелки-кружка поверх картинки у анонима больше нет (решение владельца,
   2026-10): карточка и так читается кнопкой — рамка, подпись «Создать…» и
   зелёная подсветка при наведении; кружок закрывал клетки карты. */
#scr-intro.intro--anon .intro-map-preview-cap {
  /* Под превью — ВСЕГДА одной строкой: кегль подгоняется под ширину
     карточки. Шрифт и цвет — те же, что у названия карты в шапке
     (#jm-header-title: Cormorant Garamond 600, #5A5049), а не зелёный
     Jost: подпись читается частью сайта, а не отдельной плашкой-кнопкой.
     Строка в Cormorant 600 ≈ 12.5em — делим на 13 с запасом. Потолок
     1.75rem: у Cormorant низкие строчные, при том же кегле он мельче Jost. */
  font-family: 'Cormorant Garamond', serif;
  font-size: min(1.75rem, calc((100cqi - 4px) / 13)); font-weight: 600; line-height: 1.2;
  white-space: nowrap;
  color: #5A5049;
}
/* Низкий экран любой ширины — карточка в строку: картинка налево (вилка по
   vh — здесь в дефиците высота), подпись направо. */
@media (max-height: 700px) {
  #scr-intro.intro--anon .intro-map-preview {
    flex-direction: row; align-items: center; text-align: left;
    gap: 14px; max-width: 380px; padding: 10px 16px 10px 10px;
  }
  #scr-intro.intro--anon .intro-map-preview-imgwrap { flex-shrink: 0; }
  #scr-intro.intro--anon .intro-map-preview-img {
    width: clamp(90px, 18vh * var(--cex-app-k, 1), 130px); height: clamp(90px, 18vh * var(--cex-app-k, 1), 130px);
  }
  /* В строке подпись стоит справа от картинки — тут перенос по словам
     допустим, кегль прежний (не от ширины карточки). */
  #scr-intro.intro--anon .intro-map-preview-cap {
    justify-content: flex-start; align-items: flex-start; text-align: left;
    white-space: normal; font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem);
  }
}

/* Кнопки-варианты в модале приглашения (#join-modal) — две строки («что» и «кто и
   сколько»), как у кнопок на широком экране, но на всю ширину окна модала и
   по центру: заголовок и текст модала тоже центрированы, а левый край у
   кнопки во всю ширину не с чем выравнивать. Выравнивание по поперечной оси
   не задаём совсем — align-items:center у .cex-btn (ниже по файлу, та же
   специфичность) всё равно перебил бы его. */
/* Тот же вид, что у двухстрочных центральных кнопок главной (#btn-consult,
   см. CLAUDE.md): строки прижаты влево внутри .intro-start-opt-lines, группа
   центрирована на кнопке; верхняя — кегль кнопки, нижняя — мелкая подпись:
   на тёмной кнопке светлая (#CEC4B8), на светлой — серый текст. */
.intro-start-opt {
  width: 100%;
  flex-direction: column;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 10px;
  container-type: inline-size;   /* мелкая подпись меряется шириной кнопки (cqi) */
}
.intro-start-opt--last { margin-bottom: 0; }
.intro-start-opt-lines { display: flex; flex-direction: column; align-items: flex-start; }
.intro-start-opt-main { font-size: var(--fs-ui); font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.intro-start-opt-sub  {
  /* ВСЕГДА одной строкой: на узком экране кегль ужимается под ширину кнопки.
     Самая длинная подпись («Живая сессия · 1,5 часа · от 2 000 ₽ / 25 €»)
     в Jost 400 ≈ 19.6em — делим на 20 с небольшим запасом. */
  font-size: min(var(--fs-meta), calc(100cqi / 20));
  white-space: nowrap;
  color: var(--c-muted-text); margin-top: 3px;
}
.cex-btn-ink .intro-start-opt-sub { color: #CEC4B8; }

/* ── Header ── */
.cex-hdr {
  padding: 12px 22px;
  border-bottom: 1px solid #CEC4B8;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); position: sticky; top: 0; z-index: 20;
  flex-shrink: 0;
}
.cex-logo { font-family: 'Cormorant Garamond', serif; font-size: clamp(17px, 4vw, 23px); font-weight: 600; letter-spacing: .06em; }
.cex-logo em { color: #8EA68C; font-style: normal; }
/* Место заголовка экрана в шапке: ширина шапки минус поля 2×22px, минус логотип
   (его ширина идёт за кеглем: clamp(82px, 19.4vw, 111px) — кегль логотипа
   clamp(17px, 4vw, 23px)) и 10px зазора. Заголовок длиннее обрезается
   многоточием, а не наезжает на логотип (так было на 320px у длинных
   «Прерванные и сброшенные», «Подбор пар психолог-клиент» и подобных). */
.cex-hdr { --cex-hdr-logo: clamp(82px, 19.4vw, 111px); --cex-hdr-room: calc(100% - 44px - var(--cex-hdr-logo) - 10px); }
.cex-hdr-title { position: absolute; right: 22px; left: auto; transform: none; font-family: 'Cormorant Garamond', serif; font-size: var(--fs-serif-s); font-weight: 600; letter-spacing: .06em; color: #5A5049; white-space: nowrap; pointer-events: none; max-width: var(--cex-hdr-room); overflow: hidden; text-overflow: ellipsis; }
/* Группа справа в шапке (иконка поиска/«i» + заголовок в потоке): место под
   всю группу то же, внутри неё ужимается и обрезается сам заголовок. */
.cex-hdr-group { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; max-width: var(--cex-hdr-room); min-width: 0; }
.cex-hdr-group > .cex-hdr-title { position: static; max-width: none; min-width: 0; }
.cex-hdr-count { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); white-space: nowrap; pointer-events: none; }
@media (max-width: 460px) { .cex-hdr-count { display: none; } }
/* Текущая доска в шапке «Задач» (#tasks-board-title): по центру, пока
   помещается между логотипом и «Мои задачи / Все задачи»; тесно (узкий
   экран, длинное имя) — класс .tasks-hdr--side (_cexTasksFitBoardTitle,
   tasks.js): доска встаёт справа на место заголовка экрана, тот прячется,
   длинное имя обрезается многоточием (max-width ставит JS). */
.tasks-hdr-board { left: 50%; right: auto; transform: translateX(-50%); }
.cex-hdr.tasks-hdr--side .tasks-hdr-board { left: auto; right: 22px; transform: none; }
/* Кнопка выбора доски: без рамки и подложки — название шрифтом заголовка
   и уголок вниз, по которому видно, что это выбор. Наведение — темнее
   уголок; открытое меню — уголок смотрит вверх (тёмную подложку
   .hamburger-active здесь снимаем: овала у кнопки нет). */
button.tasks-hdr-board { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; background: transparent; border: 0; cursor: default; }
button.tasks-hdr-board .tasks-hdr-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.tasks-hdr-board .tasks-hdr-board-chev { width: 15px; height: 15px; flex: 0 0 auto; color: #7A6E64; transition: transform .15s, color .15s; }
@media (hover: hover) { button.tasks-hdr-board:hover .tasks-hdr-board-chev { color: #28231E; } }
button.tasks-hdr-board.hamburger-active { background: transparent !important; color: #5A5049 !important; border-color: transparent !important; }
button.tasks-hdr-board.hamburger-active .tasks-hdr-board-chev { transform: rotate(180deg); color: #28231E; }
button.tasks-hdr-board:focus-visible { outline: 2px solid #8EA68C; outline-offset: 3px; border-radius: 4px; }
.cex-hdr.tasks-hdr--side #tasks-title { display: none; }

/* «Психологическая терминология» в хедере списка понятий (#terms-title,
   terms.html) — на узком экране (тот же порог, что у .cex-collapse)
   остаётся только «Терминология», рядом с иконками поиска/«i» и логотипом
   полностью не помещается. */
@media (max-width: 480px) { .terms-title-prefix { display: none; } }

/* Заголовок вида в шапке карты (#jm-header-title, см. index.html) — на широком
   экране стоит по центру рядом с «Картой Совместности», на узком (до 720px)
   уходит из центра к правому краю — встаёт
   прямо на место надписи «Карта Совместности» (jm-header-brand-text, она
   прячется), а номер версии (#btn-markup-extra) остаётся сразу за ним, там
   же, где и был. Текст везде один и тот же, без сокращений. Технически:
   заголовок перестаёт быть абсолютным и получает margin-left:auto вместо
   brand — свободное место в строке достаётся ему, а brand просто идёт следом
   без своего отступа. Класс jm-title-active ставит _cexApplyJmHeaderTitle
   (map.js) ровно тогда, когда заголовок вида показан (не на самой рабочей
   карте) — сама видимость #jm-header-title держится на инлайновом display,
   здесь только его следствие для соседей на узком экране. !important — у
   всех элементов инлайновый display/position/margin (та же логика, что у
   .sticker.mkp-hl/.stickers-hidden выше), обычное правило его не перебьёт.

   Порог — 720px, а не 480px общих кнопок: самый длинный заголовок («Тур по
   карте совместности», ~232px), стоя по центру, наезжает на «Карту
   Совместности» справа до ширины ~690px (на 600px — на ~43px). С 720px зазор
   между ними не меньше ~20px. Заголовок длиннее — поднять порог. */
@media (max-width: 720px) {
  #jm-header.jm-title-active #jm-header-title {
    position: static !important; left: auto !important; transform: none !important;
    margin-left: auto !important; margin-right: 4px;
    /* не шире места между логотипом и номером версии (~36px); длиннее —
       многоточие (на 320px «Тур по карте совместности» упирался в логотип) */
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    max-width: calc(100% - var(--cex-hdr-logo) - 10px - 36px); /* в потоке: % от ширины шапки без полей */
  }
  #jm-header.jm-title-active #jm-header-brand { margin-left: 0 !important; }
  #jm-header.jm-title-active #jm-header-brand-text { display: none !important; }
}

/* ── Round bar ── */
.rnd-bar {
  padding: 12px 22px;
  border-bottom: 1px solid #CEC4B8;
  flex-shrink: 0;
}
.rnd-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 10px; }
/* Обёртка тега+счётчика — отдельно от .rnd-top, чтобы бейдж-цифра «1» (студенту)
   оставался слева от «вопроса» и на узких экранах: в колонку на media (max-width:380px)
   уходит только эта обёртка, а .rnd-top остаётся строкой. */
.rnd-top-info { display: flex; flex: 1; justify-content: center; align-items: flex-start; gap: 10px; min-width: 0; }
.rnd-tag {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 20px;
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-label);
  font-weight: 400; letter-spacing: .01em; line-height: 1.55;
  white-space: normal; flex: 1; text-transform: uppercase;
}
.rnd-tag.r1 { background: #EBF4EB; color: #3E6E3E; }
.rnd-tag.r2 { background: #E5EFEF; color: #2E5A5A; }
.rnd-tag.r3 { background: #F0F0E8; color: #6A6A58; }
.rnd-ctr { font-size: var(--fs-small); color: #9A8E84; white-space: nowrap; padding-top: 6px; }
.prog { height: 2px; background: #CEC4B8; border-radius: 2px; }
.prog-fill { height: 100%; border-radius: 2px; transition: width .35s ease; }
.prog-fill.r1 { background: #8EA68C; }
.prog-fill.r2 { background: #88ADAC; }
.prog-fill.r3 { background: #A8A88A; }

/* ── Card area (scrollable) ── */
.cex-card-area {
  overflow: visible;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 8px 8px 12px 8px;
  position: relative;
}

/* ── Selection card ── */
.sel-card {
  width: 100%; max-width: 480px;
  border-radius: 18px;
  overflow: hidden; background: #F5EEE1;
  box-shadow:
    0 2px 4px rgba(14,15,14,0.08),
    0 6px 16px rgba(14,15,14,0.12),
    0 16px 32px rgba(14,15,14,0.18);
}
.sel-card-topbar {
  padding: 10px 17px;
  background: #E6DFD3; border-bottom: 1px solid #CEC4B8;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.sel-card-id {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-serif-s); font-weight: 600; letter-spacing: .14em; color: #5A5049; white-space: nowrap;
}
.sel-card-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-serif-s); font-weight: 600; color: #28231E; text-align: right;
}
.sel-zone { padding: 14px 17px; background: var(--zone-color, #C5C5B3); }
.ph {
  display: block; width: 100%;
  /* Справа было 25px — колонка под кнопку «!» в конце строки. Кнопки больше
     нет (красный — третий клик по самой фразе), поэтому отступы симметричны. */
  padding: 10px 15px;
  border-radius: 10px; border: 1.5px solid transparent;
  background: rgba(255,255,255,.14); color: var(--zone-color-txt, #3A3535);
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-body);
  text-align: left; cursor: default; transition: all .14s; line-height: 1.5; margin-bottom: 6px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.ph:last-child { margin-bottom: 0; }
/* Подсветка только для клавиатуры (:focus-visible) и для настоящего наводящего
   указателя (мышь/трекпад). :hover вынесен в @media (hover: hover), иначе на
   сенсоре он «залипает» на последней тронутой фразе и оставляет белый фон после
   снятия выделения пальцем. */
.ph:focus-visible { background: rgba(255,255,255,.38); border-color: rgba(255,255,255,.48); }
@media (hover: hover) {
  .ph:hover { background: rgba(255,255,255,.38); border-color: rgba(255,255,255,.48); }
}
.ph:focus { outline: none; }
.ph.on { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.80); }
.ph.on::after { content: ' ✓'; font-size: var(--fs-small); opacity: .65; }
.ph.question { background: rgba(255,255,255,.32); border-color: rgba(139,100,92,0.25); }
.ph.question::after { content: ' ?'; font-size: var(--fs-small); opacity: .65; }
/* Stage 1 & 2: question border much paler (stage 3 inherits zone-helper override below) */
.sel-zone:not(.zone-helper) .ph.question { border-color: rgba(139,100,92,0.08); }
/* Stage 3 sticky zone: cream bg needs visible brown border */
.zone-helper .ph { border-color: rgba(139,100,92,0.05); background: rgba(255,255,255,.55); }
.zone-helper .ph:focus-visible { border-color: rgba(139,100,92,0.10); background: rgba(255,255,255,.8); }
@media (hover: hover) {
  .zone-helper .ph:hover { border-color: rgba(139,100,92,0.10); background: rgba(255,255,255,.8); }
}
.zone-helper .ph.on { border-color: rgba(139,100,92,0.25); background: rgba(255,255,255,.9); }

/* ── CEX phrase highlights matching map colours ──────────────────────────
   Peach  = «Да»        (.ph.on)       — первый клик
   Gray   = «Сомневаюсь» (.ph.question) — второй клик
   Red    = «О, да!»    (.ph.on.bang)  — третий клик; выше по специфичности,
            объявлен последним. Отдельной кнопки «!» в конце строки больше
            нет — цвет задаёт класс на самой фразе (см. cexTogglePh, map.js).
   ───────────────────────────────────────────────────────────────── */
.ph.on::after { content: ''; }
.ph.question::after { content: ''; }
/* Вопрос → серый */
.ph.question {
  background: rgba(60,45,30,0.08) !important;
  border-color: rgba(60,45,30,0.12) !important;
}
/* Галочка → персик (чуть бледнее) */
.ph.on {
  background: rgba(255,210,160,0.30) !important;
  border-color: rgba(255,180,100,0.30) !important;
}
/* «О, да!» (третий клик) → красный (override персика) */
.ph.on.bang {
  background: rgba(255,175,163,0.45) !important;
  border-color: rgba(255,140,120,0.42) !important;
}
/* zone-helper (область 3) — те же цвета */
.zone-helper .ph.question {
  background: rgba(60,45,30,0.07) !important;
  border-color: rgba(60,45,30,0.10) !important;
}
.zone-helper .ph.on {
  background: rgba(255,210,160,0.30) !important;
  border-color: rgba(255,180,100,0.28) !important;
}
.zone-helper .ph.on.bang {
  background: rgba(255,175,163,0.42) !important;
  border-color: rgba(255,140,120,0.38) !important;
}
/* Non-psychologist solo — no pointer cursor on stiky silhouette and circle area */
.cex-client-solo .stiky-img,
.cex-client-solo .stiky { cursor: default !important; }
/* Non-psychologist solo — block all interactive clicks on the map */
.cex-client-solo .stiky-img,
.cex-client-solo .ph-zone .ph-span { pointer-events: none !important; }
/* Red textarea in readonly mode — display as plain text, no editing cues.
   Click on it zooms to the card (see map.js redTextarea branch), same as the
   silhouette (.stiky-img) next to it — cursor must match that affordance.
   Passive client's field is actually still editable (contentEditable=true,
   see _cexConfigureMapForContext), so it keeps the base text-cursor.
   .red-input is the whole 70×70 visible square; .red-textarea inside it
   shrinks to the text and sits centered, leaving empty margin around short
   text — cursor (and, in map.js, the click zoom) must cover the full square,
   not just that narrow text box, or the hand cursor is hard to land on.
   Курсор — ладошка (grab), как на всех зонах приближения карты. */
.map-readonly:not(.cex-passive-client) .red-input,
.map-readonly:not(.cex-passive-client) .red-textarea,
.map-readonly:not(.cex-passive-client) .stiky-img {
  cursor: grab !important;
}
.map-readonly:not(.cex-passive-client) .red-textarea:empty::before {
  display: none;
}
.sel-sticky {
  background: #FFFFF5; padding: 10px 17px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 10px;
}
.sel-sticky-dot { width: 7px; height: 7px; border-radius: 50%; background: #8B645C; opacity: .4; flex-shrink: 0; }
.sel-sticky-text { font-size: var(--fs-small); color: #8B645C; opacity: .7; font-style: italic; }

/* ── Footer ── */
.rnd-foot {
  padding: 12px 22px;
  border-top: 1px solid #CEC4B8;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg); flex-shrink: 0;
}

/* ── Buttons ── */
.cex-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 21px;
  border-radius: 9px; border: none;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-ui);
  font-weight: 500; cursor: default; transition: all .15s; letter-spacing: .02em;
  min-height: var(--cex-btn-h); /* единая высота кнопок (accessible tap target) */
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.cex-btn-ink { background: #5A5049; color: #F0EBE1; border: 1.5px solid transparent; }
.cex-btn-ink:hover, .cex-btn-ink:active, .cex-btn-ink.bg-hover { background: #28231E; }
.cex-btn-out { background: transparent; border: 1.5px solid #CEC4B8; color: #5A5049; }
/* Тёплая оранжеватая — своя кнопка раздела, отличимая от светлых и тёмной
   («Задачи» в футере главной, решение владельца). */
/* Без видимой рамки (прозрачная — размер тот же, что у соседей): сплошная
   бледная заливка. */
.cex-btn-warm { background: #F5C898; border: 1.5px solid transparent; color: #6E3C12; }
.cex-btn-warm:hover, .cex-btn-warm:active, .cex-btn-warm.bg-hover { background: #EFB97F; color: #552C08; }
#nav-tasks-btn .cex-btn-icon { color: #E0995A; }
/* «Задача выполнена · Вернуть?» — кликабельный тост (tasks.js,
   _cexTasksUndoDoneToast); вид и место — как у общего _cexShowToast. */
.cex-task-undo-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 99999; max-width: min(90vw, 360px);
  padding: 10px 20px; border: 0; border-radius: 10px;
  background: #6B5048; color: #F0EBE1;
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); line-height: 1.35;
  text-align: center; cursor: default; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cex-task-undo-toast.is-on { opacity: 1; pointer-events: auto; }
/* Число новых комментариев у названия задачи в списке. */
.cex-task-unread { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 8px; background: #D98276; color: #fff; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.3; vertical-align: 2px; }
/* Галочка выполнения справа от названия на экране правки задачи. */
.cex-task-done-ctl { flex-shrink: 0; width: 22px; height: calc(var(--cex-task-fs) * 1.4 + 4px); display: flex; align-items: center; justify-content: center; cursor: default; }
.cex-task-done-ctl input { margin: 0; width: 17px; height: 17px; accent-color: #8EA68C; cursor: default; }
.cex-task-done-ctl input:disabled { cursor: default; }
.cex-btn-out:hover, .cex-btn-out:active, .cex-btn-out.bg-hover { border-color: #9A8E84; color: #28231E; }
/* «Темноватая» подсветка — выбранное, но не активное действие: кнопка
   версии, когда выбрана текущая (в самом меню версий цвета нет); текущий раздел
   режима «Разработки карты» (кнопка режима, кнопка раздела, пункт меню).
   Тона — ровно те, что у тёмной кнопки в покое (.cex-btn-ink: #5A5049 на
   #F0EBE1), а не отдельный бежевый: «где я» выглядит как тёмная кнопка, к
   которой не прикасаются, тёмное #28231E остаётся открытому меню и активной
   разметке. Стоит ДО .hamburger-active: открытое меню красит тёмным поверх. */
.cex-btn-mid { background: #5A5049 !important; color: #F0EBE1 !important; border-color: transparent !important; }
.hamburger-active { background: #28231E !important; color: #F0EBE1 !important; border-color: #28231E !important; }
.btn-consult-process { border-color: #8EA68C !important; color: #8EA68C !important; background: transparent !important; }
.btn-consult-process:hover, .btn-consult-process:active { background: rgba(142,166,140,0.1) !important; }

/* ── Registration/Brief style ── */
.reg-body {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  padding: 44px 30px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 0;
}

/* Centre short content vertically; 'safe center' falls back to start on overflow — top always reachable */
.reg-body > .reg-form { flex-shrink: 0; }

/* Узкий экран: вопросы/подсказки анкеты и раундов сессии (form/interview/
   questions/legend/inst1-4/round-tip — единственные экраны на .reg-body) —
   боковые отступы в 1,5 раза меньше, чтобы текст не терялся в пустых полях.
   Подсказки этих же экранов стоят не в .reg-body, а в .cex-footer (своя
   боковая набивка 22px) — та же узкоэкранная скидка нужна и там, но только
   на экранах потока сессии (.cex-footer — общий класс на весь сайт, трогать
   его целиком нельзя). У scr-round вместо .reg-body — .rnd-bar (там «вопрос»
   раунда, .rnd-tag/.rnd-ctr), её боковая набивка сужается тем же правилом. */
@media (max-width: 480px) {
  .reg-body { padding-left: 20px; padding-right: 20px; }
  #scr-form .cex-footer, #scr-interview .cex-footer, #scr-questions .cex-footer,
  #scr-questions2 .cex-footer, #scr-legend .cex-footer, #scr-inst1 .cex-footer,
  #scr-inst2 .cex-footer, #scr-inst3 .cex-footer, #scr-inst4 .cex-footer,
  #scr-round-tip .cex-footer, #scr-round .cex-footer, #scr-round .rnd-bar {
    padding-left: 15px; padding-right: 15px;
  }
}

.reg-form {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brief .reg-form {
  max-width: 520px;
}

.reg-label {
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-label);
  font-weight: 500;
  color: #5A5049;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.reg-input {
  padding: 11px 14px;
  border-radius: 9px;
  border: 1.5px solid #CEC4B8;
  background: white;
  color: #28231E;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-input);
  transition: border-color 0.15s;
}
.reg-input:-webkit-autofill,
.reg-input:-webkit-autofill:hover,
.reg-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #28231E;
  box-shadow: 0 0 0 1000px white inset;
}

.reg-input::placeholder {
  color: #9A8E84;
}

.reg-input:focus {
  outline: none;
  border-color: #8EA68C;
}

.reg-input.reg-input-invalid {
  border-color: #FFAFA3;
}

.reg-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reg-checkbox-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-top: 3px;
  accent-color: #8EA68C;
  cursor: default;
}

.reg-checkbox-wrap label {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #5A5049;
  line-height: 1.6;
  cursor: default;
  flex: 1;
}

.reg-note {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  color: var(--c-muted-text);
  line-height: 1.65;
  margin-left: 26px;
  margin-top: 6px;
}

.reg-text {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #5A5049;
  line-height: var(--lh-text);
}

.reg-greeting {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-serif-l);
  font-weight: 400;
  color: #28231E;
  margin-bottom: 20px;
}

.cex-question {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(19px, 4vw, 22px);
  font-weight: 400;
  font-style: italic;
  color: #3A302A;
  line-height: 1.55;
  letter-spacing: 0.01em;
  display: block;
}

.reg-period-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

.reg-period-wrap input {
  width: 80px;
  text-align: center;
}

.reg-period-wrap select {
  flex: 1;
}

/* ── Кастомный bottom sheet вместо нативного select (без радиокнопок) ──── */
.cex-select-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 10100;
  align-items: flex-end;
}
.cex-select-overlay.active { display: flex; }

.cex-select-sheet {
  width: 100%;
  background: #fff;
  border-radius: 14px 14px 0 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cex-select-sheet.open { transform: translateY(0); }

.cex-select-list {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 0;
}

.cex-select-opt {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border: none;
  background: none;
  text-align: left;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #28231E;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.cex-select-opt:active { background: rgba(206,196,184,0.25); }
.cex-select-opt--sel   { color: #8EA68C; font-weight: 500; }

.cex-select-cancel {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-top: 1px solid #EDE8E1;
  background: #fff;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #9A8E84;
  cursor: default;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.cex-select-cancel:active { background: rgba(206,196,184,0.15); }

#input-period-number {
  flex: none;
  width: 80px;
  text-align: center;
}

/* iOS игнорирует padding у <select> по умолчанию — убираем нативное оформление */
select.reg-input {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A8E84' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: default;
}

/* Боковые поля футеров: 22px, на узком экране (≤400px) — 14px. Общая
   переменная, чтобы футер экрана, футер под картой (#jm-pdf-bar, солвер
   _cexLayoutFooter в map.js читает её же) и «ручки» полей комментариев
   двигались вместе — иначе кнопкам не хватает ширины и ряд уходит в два. */
:root { --cex-footer-px: 22px; }
@media (max-width: 400px) {
  :root { --cex-footer-px: 14px; }
  /* Зазор между кнопками ряда — 6px вместо 8–10 (у групп, где он и так
     меньше или задан экраном отдельно, — своё правило выше по специфичности). */
  .cex-footer .reg-btn-group,
  .cex-footer .reg-btn-group.reg-btn-group--tight,
  .cex-footer .cex-btn-cluster,
  .cex-footer .cex-btn-cluster--tight,
  .cex-comment-bar-actions .reg-btn-group,
  .cex-comment-bar-actions .cex-btn-cluster { gap: 6px; }
}
.cex-footer {
  flex-shrink: 0;
  padding: 12px var(--cex-footer-px);
  border-top: 1px solid #CEC4B8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F0EBE1;
}
.cex-footer .reg-btn-group {
  width: 100%;
  margin-top: 0;
  justify-content: flex-end;
}
.cex-footer .reg-btn-group > .cex-btn-out:first-child {
  margin-right: auto;
}
/* Минимальный зазор между кнопкой выхода и кнопками справа, когда ряду
   тесно и они упираются в выход: к зазору ряда (6–10px) ещё 8px — выход не
   сливается с кнопками действия (на карте выход отделяет зазор групп футера,
   _CEX_FOOTER_GAP_PHONE в map.js). Отступ — у первой ВИДИМОЙ кнопки после
   выхода (скрытые экран прячет inline display:none; перебор до трёх скрытых
   подряд). Кластеру — padding, а не margin: его margin-left:auto держит
   кластер справа и после переноса строки. */
.cex-footer .reg-btn-group > .cex-btn-out:first-child + *:not([style*="display:none"]):not([style*="display: none"]):not(.cex-btn-cluster),
.cex-footer .reg-btn-group > .cex-btn-out:first-child + :is([style*="display:none"], [style*="display: none"]) + *:not([style*="display:none"]):not([style*="display: none"]):not(.cex-btn-cluster),
.cex-footer .reg-btn-group > .cex-btn-out:first-child + :is([style*="display:none"], [style*="display: none"]) + :is([style*="display:none"], [style*="display: none"]) + *:not([style*="display:none"]):not([style*="display: none"]):not(.cex-btn-cluster),
.cex-footer .reg-btn-group > .cex-btn-out:first-child + :is([style*="display:none"], [style*="display: none"]) + :is([style*="display:none"], [style*="display: none"]) + :is([style*="display:none"], [style*="display: none"]) + *:not([style*="display:none"]):not([style*="display: none"]):not(.cex-btn-cluster) {
  margin-left: 8px;
}
.cex-footer .reg-btn-group > .cex-btn-out:first-child + .cex-btn-cluster:not([style*="display:none"]):not([style*="display: none"]),
.cex-footer .reg-btn-group > .cex-btn-out:first-child + :is([style*="display:none"], [style*="display: none"]) + .cex-btn-cluster:not([style*="display:none"]):not([style*="display: none"]),
.cex-footer .reg-btn-group > .cex-btn-out:first-child + :is([style*="display:none"], [style*="display: none"]) + :is([style*="display:none"], [style*="display: none"]) + .cex-btn-cluster:not([style*="display:none"]):not([style*="display: none"]),
.cex-footer .reg-btn-group > .cex-btn-out:first-child + :is([style*="display:none"], [style*="display: none"]) + :is([style*="display:none"], [style*="display: none"]) + :is([style*="display:none"], [style*="display: none"]) + .cex-btn-cluster:not([style*="display:none"]):not([style*="display: none"]) {
  padding-left: 8px;
}
/* Модификаторы группы вместо inline-стилей в разметке экранов:
   --wrap/--nowrap — перенос ряда, --tight — зазор 8px вместо 10 (тесные ряды
   админки и «Теорий»). */
/* У переносимых и намеренно непереносимых рядов — space-between: перенесённая
   строка распределяется по ширине, а при нехватке места ряд выступает вправо
   (за последнюю кнопку), а не влево за кнопку выхода. */
.reg-btn-group.reg-btn-group--wrap   { flex-wrap: wrap;   justify-content: space-between; }
.reg-btn-group.reg-btn-group--nowrap { flex-wrap: nowrap; justify-content: space-between; }
.reg-btn-group.reg-btn-group--tight  { gap: 8px; } /* два класса: базовый gap задан ниже по файлу */
/* Кластер кнопок действия у правого края (после кнопки выхода). align-items
   не задаём: умолчание stretch держит кнопки ряда одной высоты (см. правило
   про align-items:stretch в CLAUDE.md). */
.cex-btn-cluster { display: flex; gap: 10px; margin-left: auto; }
.cex-btn-cluster--tight { gap: 8px; }
.cex-btn-cluster--wrap  { flex-wrap: wrap; justify-content: flex-end; }
/* Футер страницы сравнения психолога: две группы кнопок (коллеги · клиент и
   обзор) — между группами шире, внутри 4px, как у групп футера карты. */
.cex-footer .cex-btn-cluster.cex-cmp-fgrps { gap: 22px; }
.cex-cmp-fgrp { display: flex; gap: 4px; }
@media (max-width: 480px) { .cex-footer .cex-btn-cluster.cex-cmp-fgrps { gap: 10px; } }
/* «i» подраздела «Разработки карты» — в футере, отдельной строкой НАД рядом
   кнопок, у правого края (над правой кнопкой). Отступ снизу — у самой кнопки:
   спрятана кнопка (display:none) — строка не занимает места. */
.cex-info-row { display: flex; justify-content: flex-end; flex-shrink: 0; }
.cex-info-row > button {
  background: none; border: 0; padding: 2px; margin-bottom: 6px;
  line-height: 0; color: #9A8E84;
}
/* Футер, в котором над кнопками стоит ещё что-то (подсказка психолога, мета
   сессии, подсказка+легенда раунда), — КОЛОНКА, а не строка (как jm-psych-hint
   на карте). Раскладку ведёт ТОЛЬКО класс в разметке (.cex-footer--stack) —
   он проставлен статически на каждом футере, где такой элемент вообще есть
   (пусть и скрытый): form/inst1-4/interview/legend/questions2/round-tip/round
   и футер главной (там подсказка психолога на старте сессии). :has() не
   используем — на браузерах старше Chrome 105 такое правило отбрасывается
   целиком, а класс работает везде; отдельного класса «мета показана» больше
   нет — пока все верхние элементы скрыты, колонка из одной строки .reg-btn-group
   на всю ширину выглядит ровно как строка. У футера экрана запроса ту же
   колонку включает свой класс .cex-psych-note-host (см. ниже по файлу). */
.cex-footer--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* ── Единый контейнер подсказок психолога ─────────────────────────────────── */
.cex-tip-psych,
.cex-footer .cex-tip-online,
#jm-psych-hint {
  border-left: 3px solid #8EA68C;
  background: rgba(142,166,140,0.1);
  border-radius: 0 6px 6px 0;
  padding: 8px 10px 8px 12px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  /* прямая речь — что говорится вслух клиенту */
  font-family: 'Jost', sans-serif;
  font-style: normal;
  font-size: var(--fs-body);
  color: #5A5049;
  line-height: 1.5;
  letter-spacing: normal;
}
/* Подсказка психолога, разбитая для студента на отдельные зелёные поля с
   бейджами: сам #jm-psych-hint становится прозрачным контейнером, а зелёный вид
   несут вложенные .cex-tip-psych (см. _cexSetPsychHint, класс добавляется только
   студенту). */
#jm-psych-hint.jm-hint-split {
  border-left: none;
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
#jm-psych-hint.jm-hint-split .cex-student-hint-row:last-child .cex-tip-psych { margin-bottom: 0; }
/* Параграфы внутри футерных подсказок (убирают `.reg-text` дефолты) */
.cex-tip-psych p {
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  margin: 0;
}
.cex-tip-psych p + p { margin-top: 6px; }

/* ── Цифры-подсказки студенту: порядок действий на странице во время онлайн-сессии ─ */
.cex-student-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8EA68C;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Единое правило вида подсказки с бейджем-цифрой (главная, интро-футер, карта).
   Применяется ко всем .cex-student-hint-row единообразно:
   • бейдж НЕ заезжает за край видимой зоны — margin-left:0 (у #jm-pdf-bar на
     карте overflow:hidden обрезал бы отрицательный отступ);
   • бейдж отстоит от левого соседа подсказки — вертикальной зелёной черты
     (border-left у .cex-tip-psych / #jm-psych-hint) или текста — на gap;
   • за счёт gap левый край подсказки сдвинут правее (зазор ~4px от черты). */
.cex-student-hint-row { display: flex; align-items: flex-start; gap: 5px; width: 100%; }
.cex-student-hint-badge { flex-shrink: 0; margin-top: 1px; margin-left: 0; }
/* Содержимое строки-подсказки (текст/зелёное поле) занимает остаток ширины и
   может переносить строки — не сжимается бейджем. Позволяет оборачивать любой
   элемент в .cex-student-hint-row без правки его inline-стилей. */
.cex-student-hint-row > :not(.cex-student-hint-badge) { flex: 1 1 auto; min-width: 0; }

/* Бейджи у текстов в ОСНОВНОЙ части экрана (reg-body): бейдж стоит в левом
   «жёлобе» у самого края колонки, а всё содержимое страницы сдвинуто вправо на
   ширину жёлоба (padding-left у .reg-form по классу .cex-stu-indent, который
   вешает _cexApplyInterviewStudentBadges только когда на странице есть текстовый
   бейдж студента). Так заголовок и тексты выровнены, а бейдж не наезжает. */
.cex-screen.cex-stu-indent .reg-body > .reg-form { padding-left: 24px; }
.reg-body .cex-student-hint-row { position: relative; }
.reg-body .cex-student-hint-badge { position: absolute; left: -24px; top: 2px; margin: 0; }

/* ── Сворачиваемая подсказка психолога ────────────────────────────────────
   Галочка-стрелочка в правом верхнем углу зелёного поля: вниз — развёрнуто,
   влево — свёрнуто (та же иконка #i-chev-down, повёрнутая на 90°: остриё,
   смотревшее вниз, уходит влево). Разметку строит _cexWrapCollapsibleHint,
   переключает cexToggleHintCollapse (map.js). padding-right у контейнера —
   чтобы длинный текст не подтекал под кнопку. */
.cex-hint-collapsible { position: relative; padding-right: 24px; }
.cex-hint-toggle {
  position: absolute;
  top: -2px; right: -4px;
  width: 24px; height: 24px;
  padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: default;
  color: #8EA68C;
  -webkit-tap-highlight-color: transparent;
}
.cex-hint-toggle .cex-icon { width: 15px; height: 15px; vertical-align: 0; }
.cex-hint-collapsed .cex-hint-toggle .cex-icon { transform: rotate(90deg); }
.cex-hint-collapsed .cex-hint-collapsible-body { display: none; }
/* Свёрнутая подсказка показывает начало своего текста с многоточием — иначе от
   неё оставалась бы безликая полоска и было бы не понять, какая это подсказка. */
.cex-hint-collapsible-preview { display: none; }
.cex-hint-collapsed .cex-hint-collapsible-preview {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
}

/* ── Непрямая речь: внутренние инструкции психологу (не произносятся вслух) ─ */
.cex-hint-indirect {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(142,166,140,0.4);
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: var(--fs-body);
  color: rgba(58,76,56,0.85);
  line-height: 1.5;
  letter-spacing: normal;
}

/* Единый класс для всех квадратных icon-only кнопок — сторона = высоте кнопок */
.cex-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cex-btn-h);
  height: var(--cex-btn-h);
  min-height: 0 !important;
  max-height: var(--cex-btn-h);
  padding: 0 !important;
  box-sizing: border-box;
  flex: 0 0 var(--cex-btn-h);
  align-self: center;
  line-height: 1;
}

/* Rounds nav pair: shrink proportionally (equal %) when screen is narrow */
.cex-footer .reg-btn-group > div { flex: 0 1 auto; min-width: 0; }
.cex-footer .reg-btn-group > div > .cex-btn:not(.cex-icon-btn) { flex: 1 1 auto; min-width: 0; }

.reg-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}


/* Центрирование «вопроса» (rnd-tag) над прогресс-баром — теперь через
   .rnd-top-info (см. базовое правило), .rnd-top больше не участвует. */
.rnd-tag {
  text-align: center;
  flex: 1;
}

.hdr-round-counter {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #9A8E84;
}

.hdr-date {
  font-family: 'Jost', sans-serif;
  font-size: clamp(12px, 2.8vw, 14px);
  color: #9A8E84;
  white-space: nowrap;
}

/* Часы длительности консультации в центре шапки (только у психолога, все
   экраны интервью — см. _cexUpdateConsultTimer в sync.js). Позиционируем
   абсолютно, а не флексом: в шапках экранов разный набор соседей (у legend —
   один логотип, у round — ещё счётчик раундов), и только абсолютный центр
   даёт одинаковое положение везде. .cex-hdr — position:sticky, поэтому он и
   служит контейнером для абсолютного позиционирования.
   tabular-nums — чтобы цифры не «дёргали» ширину каждую секунду. */
.cex-hdr-timer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  font-weight: 500;
  color: #8EA68C;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ── Round screen centered layout ── */
#scr-round {
  flex-direction: column !important;
}

#scr-inst2, #scr-inst3, #scr-inst4 {
  position: fixed; inset: 0; z-index: 9100;
  background: var(--bg);
  font-family: 'Jost', sans-serif; color: #28231E; font-size: 16px;
  display: none; flex-direction: column;
  overflow: hidden;
}

/* Legend screens: vertically centred when content fits, scrollable from top on overflow */
#scr-legend .reg-body {
  justify-content: safe center;
}
#scr-legend .reg-form {
  gap: 16px;
}
/* Мини-легенда «Нажмите - Да» / «Два раза - Сомневаюсь» / «Три раза - О, да!»
   — три ОТДЕЛЬНЫХ абзаца одного класса, каждый с одинаковым
   margin-bottom:12px (разметка), поэтому расстояние между всеми тремя
   строками равное — не сводить обратно в один абзац через <br>, там
   расстояние между строками было бы межстрочным интервалом, а не margin, и
   разъехалось бы с отступом до третьей строки. Каждая строка без переноса
   внутри себя (nowrap), сама строка и бейджи внутри неё уменьшаются вместе
   по ширине экрана (clamp на .legend-mini-line, бейджи наследуют её
   font-size, т.к. свой явный размер убран). */
@media (max-width: 480px) {
  #scr-legend .legend-pill { padding: 2px 7px; }
}

.form-group-hidden {
  display: none;
}

.form-group-hidden.show {
  display: block;
}

/* justify-content: center (не 'safe center') — карточка центрируется ВСЕЙ
   своей высотой, с шапкой и подсказкой внизу как единый блок. У 'safe center'
   есть особенность: как только блок целиком не помещается между полосой
   прогресса и футером (карточка с длинным списком фраз — обычное дело),
   центрирование молча отключается и блок прижимается к верху контейнера —
   выглядит так, будто карточка «съехала» и не по центру вовсе. Обычный
   center сохраняет центрирование всегда (излишек тогда поровну уходит и
   вверх, и вниз, .rnd-container всё так же скроллится, чтобы достать края). */
.rnd-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 32px;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 0;
}

.rnd-container > .rnd-content { flex-shrink: 0; }

.rnd-content {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Small phones (≤380px) ── */
@media (max-width: 380px) {
  .rnd-top-info { flex-direction: column; gap: 6px; }
  .rnd-ctr { padding-top: 0; align-self: flex-end; }
  .rnd-foot { justify-content: space-between; }
  .inline-fields { flex-direction: column; }
}

/* Сворачивание кнопок футера «подпись → иконка» — ОДНИМ классом .cex-collapse
   на кнопке (css/utilities.css). Прежние общие правила на :has() по подписи
   с длинной цепочкой :not(#id) и контр-правилами удалены: контр-правила
   («в группе со «Стоп» — до 360px», «единственная кнопка держит подпись»,
   «выход + одна кнопка справа держит подпись») давно не работали — их молча
   перебивала специфичность :not(#id) основного правила, и на деле все светлые
   кнопки с подписью сворачивались на ≤480px. Ровно это поведение и закреплено
   классом. */
/* Корзина: две кнопки действия держат подпись в ОДНУ строку. Раньше они сидели
   на flex:1 1 auto с min-width:0 (общее правило .cex-footer .reg-btn-group >
   div > .cex-btn) и сжимались ниже своего текста — «Очистить корзину»
   ломалось на две строки уже на 360px даже в современном браузере, а ряд
   вырастал до 56–72px. Теперь ширину задаёт текст, а помещается он потому,
   что подписи укорочены до «Очистить всё» и «Удалить (N)» (trash.js,
   globals.js) и стрелка «На главную» свёрнута классом .cex-collapse. */
@media (max-width: 480px) {
  #scr-trash .reg-btn-group > div > .cex-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    /* 12px, а не штатные 21: на 320px ряду иначе не хватает ~5px в состоянии
       подтверждения («Очистить всё?» — самая широкая подпись). */
    padding-left: 12px;
    padding-right: 12px;
  }
  #scr-trash .reg-btn-group > div { gap: 8px; }
}
/* Футер «Авторов и подходов» (terms.html): три правые кнопки — всегда иконки
   (.cex-collapse--icon, css/utilities.css), четвёртая («Назад») — по общему
   брейкпоинту 480. Здесь только зазор ряда на телефоне. */
@media (max-width: 560px) {
  #scr-terms .cex-footer .reg-btn-group { gap: 6px; }
}
/* ── Футер экрана карточек (scr-round) ─────────────────────────────────────
   Строка подсказки: мини-легенда стоит ПЕРВОЙ, текст подсказки течёт сразу за
   ней и занимает остаток строки. Раньше легенда жила в ряду кнопок и на узком
   экране уезжала отдельной строкой (JS-солвер _cexLayoutRoundFooter мерил
   суммарную ширину), а подсказка рядом была выключена по ширине: получался
   футер в три строки с пустотами по бокам легенды и в конце подсказки.
   Теперь дом у легенды один на всех ширинах, и мерить нечего — солвер и класс
   .round-variants-wrap удалены вместе с этими правилами.
   Чипы — inline-block, а не flex-ряд: только так текст подсказки продолжает
   ту же строку, а не встаёт под них следующим flex-элементом. */
.rnd-hint-line {
  width: 100%;
  margin-bottom: 10px;
  text-align: left; /* было justify: на узком экране оно растягивало два слова на всю строку */
  line-height: 1.6; /* строка выше обычной: в ней сидят чипы */
}
.rnd-hint-line .cex-tip-default { margin: 0; }
.rnd-vbadge {
  display: inline-block;
  vertical-align: baseline;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  line-height: 1.3;
  border-radius: 12px;
  padding: 2px 9px;
  /* Зазор до соседнего чипа и до текста подсказки после последнего видимого:
     пробелов в разметке между ними нет (см. round.html). */
  margin-right: 5px;
  white-space: nowrap;
}
.rnd-vbadge--yes   { background: rgba(255,210,160,0.68); color: rgba(50,30,20,0.75); }
.rnd-vbadge--doubt { background: rgba(60,45,30,0.12);    color: rgba(50,30,20,0.50); }
.rnd-vbadge--bang  { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
/* Контейнер легенды показывает _cexApplyRoundVariantsVis, снимая inline
   display:none, — дальше раскладку решает это правило, а не JS. */
#round-variants { display: inline; }

/* Узкий экран: «Стоп» слева, «Назад» и «Дальше» делят ВЕСЬ остаток строки.
   Раньше между «Стоп» и парой навигации оставалась дыра в 60–160px, а подпись
   «Назад» при этом сворачивалась в квадратную иконку — место было, но не там.
   «Дальше» шире «Назад» (1.4): это главное действие экрана, и подпись у него
   бывает длиннее («Следующая область», «Готово» — см. cexRenderCard). */
@media (max-width: 640px) {
  #scr-round #rnd-nav-btns { flex: 1 1 auto; min-width: 0; }
  #scr-round #rnd-nav-btns > .cex-btn { flex: 1 1 0; min-width: 0; }
  #scr-round #btn-next { flex-grow: 1.4; }
  /* Подпись «Назад» остаётся на любой ширине, вплоть до 320px: место под неё
     здесь есть, а голая стрелка в ряду с текстовым «Дальше» читалась хуже.
     Поэтому #btn-prev — единственная светлая кнопка с подписью на сайте БЕЗ
     класса .cex-collapse (round.html); здесь только её ужатые поля. */
  #scr-round #btn-prev { padding: 11px 12px !important; min-width: 0; }
}
/* Клиент живой сессии на низком экране (тот же порог 700px, что у главной):
   в его футере карточек только мини-легенда и листание («Стоп», мета сессии
   и подсказки психолога ему не видны), и легенда отдельной строкой над
   кнопками отнимала у карточки высоту, которой здесь и так мало. Легенда
   встаёт в один ряд с «Назад»/«Дальше», слева от них; не хватает ширины —
   чипы переносятся внутри своей колонки, а не уводят ряд во вторую строку.
   Класс .rnd-footer--client ставит _cexApplyClientCardFooter (navigation.js). */
@media (max-height: 700px) {
  #scr-round .cex-footer.rnd-footer--client { flex-direction: row; align-items: center; gap: 10px; }
  #scr-round .rnd-footer--client .cex-session-meta,
  #scr-round .rnd-footer--client .cex-student-hint-row { display: none !important; }
  #scr-round .rnd-footer--client .rnd-hint-line { width: auto; flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
  #scr-round .rnd-footer--client .reg-btn-group { width: auto; flex: 0 1 auto; min-width: 0; }
  /* Первая карточка: «Назад» у клиента невидима (visibility — чтобы в колонке
     «Дальше» не прыгала), а в ряду «Дальше» и так прижата вправо — место
     невидимой кнопки отдаём легенде. */
  #scr-round .rnd-footer--client.rnd-footer--first #btn-prev { display: none; }
}
/* «Завершить обзор» — состояние ожидания подтверждения */
#btn-add.cex-back-btn--confirming { background: rgba(90,80,70,0.08) !important; border-color: rgba(90,80,70,0.25) !important; }
/* Группы ряда футера карты (#jm-grp-dev/-markup/-psych/-user, index.html):
   кнопки внутри группы стоят плотно, зазор между группами — на баре (ставит
   солвер _cexLayoutFooter, map.js). */
.jm-grp { display: flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
/* Разделитель групп в гамбургере карты (_cexFooterRenderMenu, map.js). */
.cex-menu-sep { height: 1px; background: #CEC4B8; margin: 6px 10px; flex-shrink: 0; }
/* Свёрнутая кнопка выхода карты (#btn-add / #btn-anon-save-account) —
   класс .back-btn-collapsed ставит солвер, геометрия общая: css/utilities.css. */

/* Hide scrollbars on webkit for scrollable screen bodies */
.reg-body::-webkit-scrollbar { display: none; }
.rnd-container::-webkit-scrollbar { display: none; }

#intro-btns-client, .intro-btns-client { row-gap: 8px; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: stretch; }
#intro-btns-client > button, .intro-btns-client > button { margin: 0; width: 192px; }
/* Ряд из двух кнопок по 192px на широком и высоком экране (на телефоне и
   низком экране — колонка, кнопки шире, правила ниже). */
@media (min-width: 481px) and (min-height: 701px) {
  #intro-btns-client > button, .intro-btns-client > button { padding-left: 10px; padding-right: 10px; }
}
/* Строчная раскладка «превью слева от кнопок» на низком экране ЛЮБОЙ ширины
   (.intro-action-row, style.css выше — то же условие max-height:700px, без
   width, иначе на широком-но-низком окне превью уже уехало бы в строку, а
   эти кнопки остались бы в ряд по 192px и не влезли рядом с картинкой).
   Правило здесь, а не рядом с .intro-action-row: должно перебить !important
   выше, а для этого — идти ПОСЛЕ него в файле (специфичность у обоих одна и
   та же, id-селектор). */
@media (max-height: 700px) {
  #intro-btns-client, .intro-btns-client { flex-direction: column !important; width: auto !important; max-width: 220px !important; }
  #intro-btns-client > button, .intro-btns-client > button { width: 100% !important; }
}

/* Списки карт — фокус для клавиатурной прокрутки */
#history-list:focus, #shared-list:focus, #stats-list:focus, #scheduled-list:focus,
#trash-list:focus, #admin-all-list:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(142,166,140,0.35);
  border-radius: 4px;
}

/* История карт — карточка */
.card-comments-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 32px; }
.history-card-top-row { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
/* ── Выбор записей в списках админки (один вид на все её разделы) ─────────
   Точка справа у каждой записи + рамка у выбранной. Показываются только когда
   список в режиме выбора: класс .cex-sel-mode на самом списке — сама запись
   ничего о режиме не знает и ничего не переключает стилями из JS. */
/* Прежний вид — остался у корзины: она не админский раздел и не менялась. */
.cex-selected { box-shadow: 0 0 0 2px #8EA68C; }
/* «Задачи» (tasks.js): в режиме выбора уголок и галочка уступают место точке выбора. */
.cex-sel-mode .cex-task-ctl { visibility: hidden; }
/* Списки админки (контейнер получает .cex-sel-mode): рамка тоньше и с мягкой
   тенью того же цвета — сплошные 2px зелени выглядели грубо, особенно когда
   выбрано полсписка. */
.cex-sel-mode .cex-selected {
  box-shadow: 0 0 0 1.25px #8EA68C, 0 1px 6px rgba(142, 166, 140, 0.22);
}
.cex-sel-mode .cex-selected,
.cex-sel-dot { transition: box-shadow .16s ease, background-color .16s ease, border-color .16s ease; }

.cex-sel-dot {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.25px solid #CEC4B8;
  background: #fff;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.cex-sel-mode .cex-sel-dot { display: flex; }
/* Режим выбора включается удержанием записи (_cexLongPress, globals.js):
   кнопки «Выбрать» нет — вне режима кнопка выбора скрыта, в режиме это
   «Отмена». Системное меню долгого нажатия на записях погашено. */
.cex-sel-btn-idle { display: none !important; }
[data-cex-sel], [data-trash-tile] { -webkit-touch-callout: none; }
.cex-sel-dot svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .16s ease;
}
.cex-selected .cex-sel-dot {
  border-color: #8EA68C;
  background: #8EA68C;
}
.cex-selected .cex-sel-dot svg { opacity: 1; }
/* Курсор-рука по всей записи: в режиме выбора кликается вся плитка, а не точка.
   Место справа освобождается только на время выбора, чтобы точка не легла на
   текст записи; у карточек истории оно уже зарезервировано в .card-comments-col. */
.cex-sel-mode [data-cex-sel] { cursor: default; padding-right: 32px; transition: padding-right .16s ease; }
/* «Задачи»: точка выбора живёт в строке названия (tasks.js, _cexSelBind с
   dotHost = head), а место под неё там уже есть — скрытые уголок и галочка
   (.cex-task-ctl). Общий отступ справа сдвинул бы точку от края — снимаем. */
.cex-sel-mode .cex-task-tile[data-cex-sel] { padding-right: 0; }
.cex-sel-mode .history-card-wrap { padding-right: 0; }

/* ═══════════════════════════════════════════════════════════════
   УНИВЕРСАЛЬНЫЙ ФУТЕР С ПОЛЕМ КОММЕНТАРИЯ
   Используется на: карте (#jm-pdf-bar), экране сравнений (#compare-comment-bar)
   и любом другом экране, где нужна та же визуальная схема.
   ═══════════════════════════════════════════════════════════════ */

.cex-comment-bar {
  flex-shrink: 0;
  padding: 0 16px 12px;
  border-top: 1px solid #CEC4B8;
  background: #F0EBE1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Движок изменения размера / скрытия поля комментария */
.cex-comment-bar-handle,
#jm-pdf-bar-handle {
  cursor: ns-resize;
  padding: 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  touch-action: none;
  margin: 0 -16px;
}
#jm-pdf-bar-handle { margin: 0 calc(-1 * var(--cex-footer-px)); }
/* Футер с полем комментария (сравнение и др.) на узком экране — те же
   боковые поля, что у остальных футеров; после базовых правил выше. */
@media (max-width: 400px) {
  .cex-comment-bar { padding-left: var(--cex-footer-px); padding-right: var(--cex-footer-px); }
  .cex-comment-bar-handle { margin-left: calc(-1 * var(--cex-footer-px)); margin-right: calc(-1 * var(--cex-footer-px)); }
}
/* Футер экрана, несущий поле заметок психолога: обсуждение запроса
   (#scr-questions-footer, класс стоит прямо в разметке) и все следующие
   экраны сессии, куда поле добавляет JS (_cexSyncPsychNoteBar, map.js).
   Полоска-регулятор подключена поверх обычного .cex-footer
   (_cexInitFooterNoteResize, map.js) — без подмены класса на
   .cex-comment-bar, чтобы не терять его собственные завязки: скрытие футера
   пассивному клиенту (_cexApplyClientFooter, navigation.js), боковую набивку
   на узком экране и раскладку кнопок (.cex-footer .reg-btn-group > div, ниже
   по файлу). Свойствам ниже неоткуда взяться из общего .cex-footer — их и
   добавляем, только таким футерам:
   — колонка, а не строка: поле и строки над ним идут друг под другом
     (у .cex-footer это включается только при подсказке психолога внутри,
     см. :has выше, — на такой случай правило просто совпадает с тем);
   — без верхнего паддинга (его роль берёт на себя padding самой полоски,
     как в .cex-comment-bar);
   — контент растягивается на всю ширину, а не центрируется (по умолчанию
     у .cex-footer align-items:center — верно для однострочного футера, но
     не для колонки с полем на всю ширину);
   — обрезается при уменьшении высоты бара, а не вылезает наружу. */
.cex-psych-note-host {
  flex-direction: column;
  gap: 0;
  padding-top: 0;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
/* Тот же приём, что у #jm-pdf-bar-handle: 22px, как боковая набивка
   .cex-footer (12px 22px), а не унаследованные -16px под .cex-comment-bar. */
.cex-psych-note-host .cex-comment-bar-handle { margin: 0 calc(-1 * var(--cex-footer-px)); padding: 5px 0 5px; }
/* Полоска посередине зоны захвата (5px сверху и снизу): прижатая к самой
   рамке (2px), она выглядела съехавшей вверх. */
/* Зона строк над кнопками в футерах раундов/инструкций (_cexEnsurePsychNoteBar,
   map.js): полоску тянут вниз — зона сжимается и закрывается СВЕРХУ (прижата
   к низу, лишнее уходит за верхний край), кнопки ниже неё не трогаются.
   Строки внутри не сжимаются — иначе первым схлопывалось бы поле, а не то,
   что над ним. Вне футера с полем (роль сменилась) — display:contents,
   строки снова обычные потомки футера. */
.cex-psych-note-body { display: contents; }
.cex-psych-note-host > .cex-psych-note-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.cex-psych-note-host > .cex-psych-note-body > * { flex-shrink: 0; }
/* Раскрытый бар (клик по полоске, перетаскивание вверх) — поле забирает
   весь прирост, как и без зоны. */
.cex-psych-note-host > .cex-psych-note-body > .cex-comment-bar-content { flex-grow: 1; }
.cex-psych-note-host > .reg-btn-group { flex-shrink: 0; }
/* Тот же отступ до кнопок, что и у .cex-comment-bar-actions (margin-top:8px) —
   здесь .reg-btn-group не обёрнута в этот класс (actionsSelector передан
   отдельно, см. _cexInitFooterNoteResize), поэтому иначе унаследовала бы
   .cex-footer .reg-btn-group { margin-top:0 }. */
.cex-psych-note-host .reg-btn-group { margin-top: 8px; }
.cex-comment-bar-handle::after,
#jm-pdf-bar-handle::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: #CEC4B8;
  transition: background 0.15s;
}
.cex-comment-bar-handle:hover::after,
#jm-pdf-bar-handle:hover::after { background: #A89E94; }
.cex-comment-bar-handle:active::after,
#jm-pdf-bar-handle:active::after,
/* Явный JS-класс (session.js) — тот же цвет, что :active, но не зависит от
   того, поддерживает ли браузер :active на touch-элементах без нативного
   тапа (полоска реагирует на кастомные touchstart/touchend, не click). */
.cex-comment-bar-handle.cex-handle-pressed::after,
#jm-pdf-bar-handle.cex-handle-pressed::after { background: #8E7E74; }

/* Прокручиваемая зона с полями комментариев */
.cex-comment-bar-content,
#jm-comment-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #CEC4B8 transparent;
}
.cex-comment-bar-content::-webkit-scrollbar,
#jm-comment-area::-webkit-scrollbar { width: 4px; }
.cex-comment-bar-content::-webkit-scrollbar-thumb,
#jm-comment-area::-webkit-scrollbar-thumb { background: #CEC4B8; border-radius: 2px; }
.cex-comment-bar-content::-webkit-scrollbar-track,
#jm-comment-area::-webkit-scrollbar-track { background: transparent; }

/* Ряд кнопок внутри универсального футера */
.cex-comment-bar-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 8px;
}
.cex-comment-bar-actions .reg-btn-group {
  width: 100%;
  margin-top: 0;
  justify-content: flex-end;
}
/* Первая outline-кнопка («Назад» / «К сравнениям» и т.п.) — прижимается к левому краю;
   остальные кнопки группируются справа. Совпадает с поведением .cex-footer. */
.cex-comment-bar-actions .reg-btn-group > .cex-btn-out:first-child {
  margin-right: auto;
}

/* Универсальное поле комментария.
   По умолчанию редактируется (белый фон, текстовый курсор).
   При [readonly] или модификаторе --readonly — бежевый фон и обычный курсор,
   сигнализирующий пользователю, что поле не редактируется.
   !important нужен, чтобы перебить inline-стили, исторически
   проставленные на textarea'ах в index.html. */
.cex-comment-input[readonly],
.cex-comment-input--readonly {
  background: #FAF5EB !important;
  cursor: default !important;
}

/* Карточка пользователя в «Ролях». .cex-role-tile — колонка: сверху
   опционально плашка открытой заявки «стать психологом», затем .cex-role-row
   (аватар · информация · угол), под ней описание роли (.cex-role-desc,
   раскрывает ⓘ) и подробности (.cex-role-details: одной строкой роль и меню
   сертификатов (.cex-role-ctrls), образование, каталог, документы). Отмеченные сертификаты —
   цифрами у имени, в виде подписей обучения.
   Угол (.cex-role-corner) — правый верхний: личный код подчёркнутой надписью,
   как кнопка кода карты в футере (#jm-history-shifr-btn), под ним ⓘ. */
.cex-role-row { flex-wrap: nowrap; }
.cex-role-corner-icons { display: flex; align-items: center; gap: 2px; }
.cex-role-corner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cex-role-code-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  color: #8EA68C;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  text-decoration: underline;
  white-space: nowrap;
  line-height: 1.5;
}
.cex-role-i,
.cex-role-more {
  background: none;
  border: none;
  padding: 2px;
  cursor: default;
  color: #9A8E84;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cex-role-i .cex-icon { width: 17px; height: 17px; stroke-width: 2; }
.cex-role-i.is-open { color: #5A9E6F; }
.cex-role-desc {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #5A5049;
  white-space: pre-line;
  background: #F8F4EE;
  border: 1px solid #E8E0D4;
  border-radius: 10px;
  padding: 9px 11px;
}
/* Зелёная галочка у имени — образование подтверждено. */
.cex-role-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8EA68C; /* фирменный зелёный — заливки и иконки */
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}
/* Подписи обучения у имени — считаются по спискам (_cexFillRoleEduLabels). */
.cex-role-edu-labels { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cex-role-edu-labels:empty { display: none; }
.cex-role-edu-label {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-label);
  font-weight: 500;
  color: #8B6F4E;
  border: 1px solid #D9C7AE;
  border-radius: 6px;
  padding: 1px 6px;
}
.cex-role-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #E8E0D4;
}
.cex-role-details-id {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-meta);
  color: var(--c-muted-text);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.cex-role-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  cursor: default;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  color: #5A5049;
}
.cex-role-check input {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: #8EA68C;
  cursor: default;
}
.cex-role-docs { display: flex; flex-direction: column; gap: 6px; }
.cex-role-docs-head {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #28231E;
}
/* Крестик владельца у документа в карточке профиля (_cexMakeDocRow,
   psych-docs.js): неброский в покое, красный — под курсором. */
.cex-doc-x {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #B0A497;
  cursor: default;
  line-height: 0;
  transition: color 0.15s, background 0.15s;
}
.cex-doc-x .cex-icon { width: 14px; height: 14px; }
.cex-doc-x:hover,
.cex-doc-x:focus-visible { color: #C0392B; background: rgba(192, 57, 43, 0.08); }

/* Зелёная галочка «Образование подтверждено» — карточка психолога в каталоге и
   в подборе (_cexMakePsychCard), страничка психолога (cexOpenPsychProfile) и
   собственные «Настройки» психолога. Ставит её админ, проверив документы
   (psych-docs.js); вид — как у бейджа сертификата рядом, только с галочкой. */
.cex-edu-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  color: #3F8B57;
  background: #EAF5EC;
  border: 1px solid #B9D6BA;
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* Только галочка — тот же вид плашки, что и с подписью, без слов; пояснение —
   по наведению/фокусу (data-tip). */
/* В кружке: тот же светло-зелёный фон, рамка и зелёная «✓». */
.cex-edu-verified--icon {
  position: relative; cursor: default; outline: none;
  justify-content: center; vertical-align: middle;
  width: 22px; height: 22px; padding: 0; box-sizing: border-box;
  border-radius: 50%; line-height: 1;
  /* Жирная «✓» (600, как у плашки с подписью) — её форма и наклон. Кегль 12px, а
     не 14px: на 14px жирный знак у иных шрифтов подходил к рамке кружка вплотную;
     при 12px знак занимает около половины диаметра, и до рамки остаётся ровное
     поле со всех сторон. */
  font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.cex-edu-verified--icon::after {
  content: attr(data-tip);
  position: absolute; left: var(--tip-x, 0); top: calc(100% + 6px); z-index: 20;
  width: max-content; max-width: min(240px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 7px 10px; border-radius: 8px; background: #28231E; color: #FCFAF6;
  font-family: 'Jost', sans-serif; font-size: var(--fs-small); font-weight: 400;
  letter-spacing: 0; line-height: 1.35; white-space: normal; text-align: left;
  display: none; pointer-events: none;
}
/* Подсказка скрыта именно display:none, а не visibility/opacity: невидимый
   абсолютный блок шириной до 240px всё равно входит в область прокрутки и
   растягивал экран вправо (на узком — горизонтальная прокрутка у каталога
   психологов, где значок стоит у правого края). */
.cex-edu-verified--icon:hover::after,
.cex-edu-verified--icon:focus::after { display: block; }

/* Подписи кнопки (см. _cexApplyIntroCenterSwap, auth.js) — «Создать карту» /
   «Пригласить клиента» / «Вводный курс для психологов», все три сейчас в одну строку;
   центрирование и сжатый line-height остались с прежних времён, когда одна
   из подписей переносилась на вторую строку, и не мешают однострочным. */
.nav-invite-label, .nav-edu-intro-label { display: inline-block; text-align: center; line-height: 1.15; }

/* «Пригласить клиента», «Вводный курс для психологов» и «Подобрать психолога» на главной
   раньше сворачивались до квадратной иконки на узком экране (≤480px) каждая
   своим отдельным медиазапросом-копией, потом — общим .cex-collapse.
   Сейчас они (как и все прочие кнопки футера главной) квадратные ВСЕГДА, на
   любой ширине: класс .cex-footer-square на самом футере (css/utilities.css).
   .cex-collapse на разметке остался ради контракта подписи/иконки —
   скрытую подпись показывает подсказкой _cexCollapsedBtnLabel (map.js).
   Свои классы (.nav-invite-icon и т.п.) остаются на разметке только как
   JS-хуки (auth.js, map.js), сама видимость больше не их работа.
   Этот слот — единственное место, где размер иконки (28px, --cex-icon-tour)
   подобран не для одной конкретной иконки, а для двух своих подряд: обычно
   тут «Вводный курс» (#i-edu-cap), но голому психологу без сертификата сюда
   же уезжает «Тур по карте» (#i-map-tour, см. _cexApplyIntroCenterSwap,
   auth.js) — оба читаются мельче общего размера .cex-icon--lg (22px) и оба
   скомпенсированы одним и тем же числом. Отсюда 28px взят КАНОНИЧЕСКИМ
   размером иконки тура на всём сайте — остальные её места (ниже,
   #nav-history-client и #btn-map-structure-overview) равняются на этот, а не
   каждое на свой множитель. */
#nav-edu-intro-btn .nav-edu-intro-icon { width: var(--cex-icon-tour); height: var(--cex-icon-tour); }

/* Иконки тура (#i-map-tour) и «Как читать карту» (#i-map-read) — обычного
   размера .cex-icon--lg, как остальные линейные иконки кнопок. Своё 28px
   (--cex-icon-tour) осталось только у «Вводного курса» (#i-edu-cap) в слоте
   выше; уехавшие туда тур/устройство карты получают .cex-icon-std (auth.js). */
#nav-edu-intro-btn .nav-edu-intro-icon.cex-icon-std { width: 22px; height: 22px; }
/* «Как читать карту» (#i-map-read — книга) чуть крупнее обычных 22px: внутри
   книги мелкие точки, на 22px она читалась мельче соседей. */
#btn-map-reading .cex-icon { width: 25px; height: 25px; }

/* По умолчанию поле комментария — высота в одну строку текста.
   При перетаскивании регулятора высоты — растёт само поле, а не пустая
   бежевая область вокруг. !important нужен, чтобы перебить inline-стили
   height: 36px, исторически проставленные на textarea'ах. */
.cex-comment-bar .cex-comment-input,
.cex-comment-bar-content .cex-comment-input {
  height: auto !important;
  overflow-y: auto !important;
}
/* Поле раскрыто ровно под весь текст (см. _cexInitCommentBarResize/session.js) —
   содержимое целиком помещается, внутренняя полоса прокрутки не нужна.
   Выше по специфичности правила overflow-y:auto выше (3 класса против 2). */
.cex-comment-bar .cex-comment-input.cex-note-fit,
.cex-comment-bar-content .cex-comment-input.cex-note-fit {
  overflow-y: hidden !important;
}
.cex-comment-bar-content {
  flex: 1 1 auto;
}
/* Любая «строка ввода» внутри бара комментариев растёт по вертикали вместе с
   баром — будь то wrapper-div с textarea+кнопкой или сама textarea как
   прямой потомок. Универсальные селекторы: класс-маркер для wrapper'а и
   textarea с .cex-comment-input как direct child. */
.cex-comment-bar-content > .cex-comment-bar-row,
.cex-comment-bar-content > textarea.cex-comment-input {
  flex: 1 1 auto;
  min-height: 36px;
}

/* Подпись-предупреждение под полем заметки/комментария (disclaimer), парная
   активному полю — общий цикл клика по полоске регулятора высоты
   (_cexInitCommentBarResize, session.js) прячет её, пока поле в однострочном
   виде, и показывает, когда поле развёрнуто на весь текст (_applyFitState
   там же). !important нужен, чтобы перебить inline display, который
   проставляют auth.js / history.js при показе полей. У футера КАРТЫ
   (#jm-pdf-bar) такой подписи нет: предупреждение о заметках вынесено в «i»
   строки метаданных (_cexAppendNotePrivacyInfo, auth.js). */
.cex-comment-row-collapsed {
  display: none !important;
}
/* Тач-устройство, курсор в поле заметок футера карты (_initPdfBarResize,
   map.js): всё ниже поля спрятано — поле нижним краем футера, клавиатура
   открывается прямо под ним. */
#jm-pdf-bar.cex-kbd-focus .jm-footer-bar,
#jm-pdf-bar.cex-kbd-focus #map-tour-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   КОНСУЛЬТАЦИЯ ПО СОЗДАННОЙ КАРТЕ — уведомление, модал, кружок
   ═══════════════════════════════════════════════════════════════ */

/* ── Уведомление ──────────────────────────────────────────────── */
.map-consult-notif {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) scale(0.72) translateY(12px);
  transform-origin: center bottom;
  z-index: 99992;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F7F2EA;
  border: 1.5px solid rgba(142, 166, 140, 0.55);
  border-radius: 16px;
  padding: 14px 18px 14px 16px;
  box-shadow:
    0 2px 6px  rgba(40,35,30,0.06),
    0 8px 28px rgba(40,35,30,0.13),
    0 0 0 4px  rgba(142,166,140,0.08);
  font-family: 'Jost', sans-serif;
  cursor: default;
  max-width: min(360px, 92vw);
  width: max-content;
  touch-action: none;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity   0.30s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-consult-notif--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1) translateY(0);
  animation: mcNotifPulse 3.2s ease 0.6s 2;
}

@keyframes mcNotifPulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(40,35,30,0.06), 0 8px 28px rgba(40,35,30,0.13), 0 0 0 4px rgba(142,166,140,0.08); }
  50%       { box-shadow: 0 2px 6px rgba(40,35,30,0.06), 0 8px 28px rgba(40,35,30,0.13), 0 0 0 8px rgba(142,166,140,0.15); }
}

.map-consult-notif-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(142, 166, 140, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-consult-notif-body {
  flex: 1;
  min-width: 0;
}

.map-consult-notif-title {
  font-size: var(--fs-body);
  font-weight: 500;
  color: #28231E;
  line-height: 1.3;
}

.map-consult-notif-sub {
  font-size: var(--fs-meta);
  color: var(--c-muted-text);
  margin-top: 2px;
}

.map-consult-notif-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 17px;
  color: #B8AFA7;
  cursor: default;
  padding: 4px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.map-consult-notif-close:hover {
  color: #4A4440;
  background: rgba(206,196,184,0.22);
}

/* ── Модал ────────────────────────────────────────────────────── */
.map-consult-box {
  width: min(400px, 92vw) !important;
  padding: 0 !important;
  overflow: hidden;
}

.map-consult-hero {
  background: linear-gradient(160deg, #EAE4D8 0%, #DDD5C6 100%);
  padding: 32px 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.map-consult-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(206,196,184,0.6), transparent);
}

.map-consult-hero--sm {
  padding: 22px 28px 20px;
}

.map-consult-hero-ornament {
  line-height: 1;
}
.map-consult-hero-ornament svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 8px rgba(142,166,140,0.3));
}

.map-consult-hero--sm .map-consult-hero-ornament svg {
  width: 20px;
  height: 20px;
}

.map-consult-content {
  padding: 24px 26px 26px;
  text-align: center;
}

.map-consult-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-serif-xl);
  font-weight: 400;
  color: #28231E;
  margin: 0 0 14px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.map-consult-divider {
  width: 32px;
  height: 1.5px;
  background: linear-gradient(to right, rgba(142,166,140,0.3), #8EA68C, rgba(142,166,140,0.3));
  border-radius: 1px;
  margin: 0 auto 16px;
}

.map-consult-text {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #5A5049;
  line-height: 1.65;
  margin: 0 0 6px;
}

.map-consult-question {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  font-weight: 500;
  color: #28231E;
  margin: 0 0 22px;
}

.map-consult-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}

.map-consult-btn-primary {
  padding: 12px !important;
  border-radius: 10px !important;
  font-size: var(--fs-ui) !important;
  width: 100%;
}

.map-consult-btn-secondary {
  padding: 11px !important;
  border-radius: 10px !important;
  font-size: var(--fs-ui) !important;
  width: 100%;
}


.map-consult-btn-back {
  background: none;
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  color: var(--c-muted-text);
  cursor: default;
  padding: 0;
  margin-bottom: 14px;
  display: block;
  transition: color 0.15s;
}
.map-consult-btn-back:hover { color: #28231E; }

/* ── Плавающий кружок — общий на оба предложения сайта (map-consult ниже и
   «Живая сессия», history.js), см. #offer-bubble/consult.js ─────────────── */
.map-consult-bubble {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 99991;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #8EA68C;
  box-shadow: 0 4px 18px rgba(40,35,30,0.22);
  cursor: default;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  touch-action: none;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
}
.map-consult-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(40,35,30,0.28);
}
/* Красная точка кружка — «среди уже просмотренных появились новые» (см.
   _cexOfferBubbleDotSync в consult.js). Сбоку сверху, с ободком цвета фона,
   чтобы читалась и на зелёном, и на светлом. */
.offer-bubble-dot {
  display: none;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #C0392B;
  border: 2px solid #F5EEE1;
  box-sizing: border-box;
  pointer-events: none;
}
.offer-bubble-dot.is-on { display: block; }
/* Та же точка у новой строки в списке кружка. */
.offer-bubble-new-mark {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #C0392B;
  pointer-events: none;
}
/* ── stagger-анимации внутри модала ──────────────────────────── */
.modal-opening .map-consult-box .map-consult-hero    { animation: cexFadeUp 0.32s ease 0.04s both; }
.modal-opening .map-consult-box .map-consult-content { animation: cexFadeUp 0.36s ease 0.14s both; }

/* ── Мобайл ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .map-consult-notif { bottom: 76px; }
  .map-consult-hero  { padding: 26px 20px 22px; }
  .map-consult-content { padding: 20px 20px 22px; }
}

/* ── «Тур по карте»: автопоказ устройства карты обычному пользователю ─────
   (map-tour.js). Текст кадра (#map-tour-bar, index.html) стоит под картой, в
   футере, над рядом навигации тура — не модалом поверх карты и не отдельной
   полосой между хедером и картой, как раньше: карта всегда видна целиком и
   сама меняется по шагу (см. _cexMapTourApplyMapState). Свой фон/рамка ему
   больше не нужны — он часть той же кремовой панели футера (#jm-pdf-bar).
   Jost для текста, без заголовков — только сам текст кадра, крупнее (16px),
   так как теперь он единственное, что читают. */
/* Пометка на кадрах тура с картой-иллюстрацией (sample) — справа сверху
   футера, мелким приглушённым (_cexMapTourRender). */
.map-tour-sample-note {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-meta);
  color: var(--c-muted-text);
  text-align: right;
  margin: 10px 0 6px;   /* ниже ручки-регулятора футера */
}
.map-tour-text {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #3A3535;
  line-height: 1.5;
  margin: 0;
}
/* Каждое предложение кадра — свой блок (см. _cexMapTourRender, map-tour.js);
   отступ только между ними, не перед первым. */
.map-tour-text-line + .map-tour-text-line {
  margin-top: 6px;
}
/* Ключевая фраза предложения (см. _cexMapTourEmphasize, map-tour.js) — 500
   оказался слишком слабым отличием от обычного текста (400); 600 раньше был
   ещё жирнее самого нужного, но потому, что был не настоящим весом шрифта, а
   синтетическим (жирностью, которую дорисовывает браузер) — грубее и тяжелее
   на глаз, чем задуман сам 600-й начерк Jost. Подключили его по-настоящему
   в Google Fonts ссылке (index.html) — тот же вес, но не «раздутый». */
.map-tour-text strong, .map-tour-bullet-lead strong,
.map-tour-bullet-row strong, .map-tour-legend-row strong {
  font-weight: 600;
}
/* Ссылки в тексте кадра («Литература», «помощи специалистов») — стандартный
   цвет ссылок сайта #6C8C68 (как в тексте редактора, .cex-rte-content a). */
.map-tour-text a, .map-tour-bullet-lead a, .map-tour-bullet-row a, .map-tour-legend-row a {
  color: #6C8C68;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-tour-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.map-tour-bullet-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.map-tour-bullet-lead {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #3A3535;
  line-height: 1.5;
}
.map-tour-bullet-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
/* Пункт в целую фразу («как дневник своих переживаний и изменений») — своей
   строкой: в ряд по нескольку укладываются только короткие слова строк и
   столбцов карты (см. group.stacked, _cexMapTourRender в map-tour.js). */
.map-tour-bullet-items--stacked {
  flex-direction: column;
  gap: 5px;
}
.map-tour-bullet-items--stacked .map-tour-bullet-row { align-items: flex-start; }
.map-tour-bullet-items--stacked .map-tour-bullet-dot { margin-top: 9px; }
.map-tour-bullet-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #3A3535;
  line-height: 1.5;
}
.map-tour-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: #8EA68C;
}
/* Легенда цветов — такой же кадр обзора, как остальные, и читается с того же
   расстояния: шрифт и цвет строки те же, что у .map-tour-text (16px/#3A3535),
   а не мелкая подпись, какой она была раньше. При таком кегле пункты уже не
   укладываются по нескольку в строку — каждый цвет идёт своей строкой
   (column), а не переносится посреди фразы. */
.map-tour-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.map-tour-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #3A3535;
  line-height: 1.5;
}
/* Квадратик цвета заметно крупнее строки текста (26px при строке 24px):
   по нему цвет находят на карте, он не должен теряться рядом с подписью. */
.map-tour-legend-dot {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
  margin-top: -1px;
  border: 1px solid rgba(90,80,73,0.18);
}
/* Ссылка внутри строки легенды (см. [текст](адрес) в _cexMapTourEmphasize) —
   тот же цвет и подчёркивание, что у ссылок в тексте редактора
   (.cex-rte-content a), не зелёный акцент карты (--ac1/--ac2): тут это просто
   текстовая ссылка, а не подсветка активного состояния. */
.map-tour-legend-row a {
  color: #6C8C68;
  text-decoration: underline;
}
.map-tour-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 10px;
}
.map-tour-btn-primary,
.map-tour-btn-secondary {
  padding: 9px 16px !important;
  border-radius: 9px !important;
  font-size: var(--fs-body) !important;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
/* Навигация тура (#map-tour-footer-nav, index.html) занимает ВЕСЬ ряд футера
   карты одна — соседей («Назад», центры разметки, разделы, правая четвёрка)
   на это время гасит целиком _cexLayoutFooter (hasTourNav, map.js), поэтому
   делить ширину не с кем и можно расти на flex:1. Первой в ряду стоит крестик
   «Закрыть тур» (#map-tour-stop-btn, #i-x), фиксированной ширины
   (.cex-icon-btn); «Назад» рядом с ней растёт на оставшееся место, поэтому
   уже, чем была бы без «Стоп» слева. */
.map-tour-footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
/* Стрелки — удлинённые (flex:1, а не квадратная иконка) — мимо них не
   промахнуться, но с потолком ширины (max-width ниже). Высота у них своя НЕ
   задаётся: ровно var(--cex-btn-h) от .cex-btn, как у любой кнопки сайта —
   раньше они были выше (56px) и выбивались из ряда футера. Дальше про ширину:
   без него на компьютере при пустых точках между ними они растягивались бы
   на половину экрана. На последнем кадре «Дальше» (display:none,
   _cexMapTourRender) уступает свой слот кнопке «Список литературы» — она
   сюда же переезжает целиком (_cexMapTourOpen) и несёт тот же класс, но БЕЗ
   потолка ширины: ей, в отличие от голой стрелки, нужно место под подпись
   (см. «стандартный» текст↔иконка переход у неё ниже). */
.map-tour-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
#map-tour-prev, #map-tour-next { max-width: 180px; }
#map-tour-prev[disabled] { opacity: 0.35; pointer-events: none; }
.map-tour-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  /* Размер группы точек — ниже, там же и формула. */
  --map-tour-dot: clamp(3.96px, calc((100vw - 243.5px) / 24.03), 7.39px);
}
/* Клик — на ВЕСЬ квадрат (см. _cexMapTourRender, map-tour.js: все точки одной
   группы и так ведут на один и тот же кадр — начало темы), поэтому кликабельна
   вся его площадь, а не крошечные кружки внутри — целиком видимый квадрат и
   есть кликабельная область, отдельного padding под неё заводить не нужно.
   Сама точка (ниже) — заметно мельче квадрата: она только индикатор внутри
   крупной кликабельной зоны, не цель тапа сама по себе. */
/* Начиналось с полного совпадения с #i-map-tour в его РЕАЛЬНОМ размере на
   экране — там, где этот символ используется как обычная иконка
   (`.cex-icon--lg`, 22×22px, см. nav-history-client в index.html), а не в
   родном viewBox 24×24. Пересчёт координат иконки (r=2, центры на 6.75/17.25)
   с тем же коэффициентом (22/24 ≈ 0.9167) давал диаметр точки 3.67px, зазор
   6px, отступ 4.35px; дальше эти три числа увеличили в 1.2 раза, ещё в 1.2
   (×1.44: 5.28px, 8.64px, 6.26px) и ещё в 1.4. Совпадение с иконкой больше
   не держим: в футере тура точки — орган управления (цель клика и индикатор
   прогресса), а не значок.

   РАЗМЕР — ПО ШИРИНЕ ЭКРАНА, и не лестницей медиазапросов, а одной формулой:
   на широком экране это те же 1.4× (7.39px), на узком группы уменьшаются
   ровно настолько, чтобы в ряд футера тура без тесноты встали «Стоп» и обе
   стрелки. Считаем так: кроме точек, в ряду стоят «Стоп» (46.5px =
   --cex-btn-h) и две стрелки, которым нужно не меньше той же 46.5px каждая,
   плюс отступы полосы (2×22px у #jm-pdf-bar), три зазора ряда (3×12px) и три
   зазора между группами (3×8px) — итого 243.5px. Остаток делится между
   четырьмя группами, а в каждой группе укладывается 6.008 диаметра точки
   (две точки + зазор 1.636 + отступы 2×1.186) — отсюда делитель 24.03 на все
   четыре. Потолок 7.39px — те самые 1.4×, выше не растём; пол 3.96px (0.75×)
   — ниже четыре точки перестают читаться как четыре. На узком экране
   (≤380px, медиазапрос ниже) зазоры ряда и между группами меньше, чем взято
   в формуле, — этот запас идёт в пользу «поместится», а не в размер точки.
   Меняете состав ряда (ещё одна кнопка, другой зазор) — пересчитайте 243.5. */
.map-tour-dot-square {
  display: grid;
  grid-template-columns: repeat(2, var(--map-tour-dot));
  grid-auto-rows: var(--map-tour-dot);
  gap: calc(var(--map-tour-dot) * 1.636);
  padding: calc(var(--map-tour-dot) * 1.186);
  cursor: default;
}
/* Точки одного размера — акцент только цветом (бежевая → зелёная), без
   увеличения активной. */
.map-tour-dot {
  width: var(--map-tour-dot);
  height: var(--map-tour-dot);
  border-radius: 50%;
  background: rgba(90,80,73,0.25);
  transition: background 0.2s;
}
.map-tour-dot--active { background: #8EA68C; }
/* «Как читать карту»: точки в одну строчку. Кадров столько, сколько на карте
   цветов (до ~11), поэтому ширина клетки точки считается от свободного места
   ряда: 222px = боковые поля + крестик + две стрелки не уже кнопки + три
   зазора ряда; --n (число кадров) ставит _cexMapTourRender. Меняете состав
   ряда — пересчитайте 222. */
.map-tour-dots--line {
  gap: 0;
  --map-tour-hit: clamp(8px, calc((100vw - 222px) / var(--n, 8)), 18px);
}
.map-tour-dots--line .map-tour-dot-hit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--map-tour-hit);
  height: var(--cex-btn-h);
  cursor: default;
}
.map-tour-dots--line .map-tour-dot {
  width: calc(var(--map-tour-hit) * 0.5);
  height: calc(var(--map-tour-hit) * 0.5);
}
@media (max-width: 380px) {
  .map-tour-footer-nav { gap: 8px; }
  .map-tour-dots { gap: 5px; }
}

/* Подсветка подписей строк/столбцов карты, пока обзор рассказывает про них
   (см. _cexMapTourHighlightAxes) — та же зелёная акцентная краска, что у
   активных точек-индикаторов выше, поверх обычного .mkp-label. Заливка
   меняется сразу, без transition. */
.mkp-label.map-tour-axis-hl { fill: #6B8F69; font-weight: 700; }

/* ── «Как читать карту» — программа кадров по своей карте (map-tour.js) ── */
/* Подсказка к названию строки/столбца, горящая вместе с оранжевой рамкой
   (_cexMapTourAxisTips, map-tour.js): тот же вид, что у всплывашки при
   наведении на подпись (_cexAxisTipNode, map.js), но свой элемент — ту гасят
   уход мыши и прокрутка, а эта должна стоять, пока горит рамка. Лежит в
   .map-outer поверх карты (выше бейджей студента), вне .map-container — не
   масштабируется вместе с картой. */
.map-tour-axis-tip {
  position: absolute; z-index: 20; pointer-events: none;
  width: max-content; max-width: min(240px, 66vw); padding: 9px 14px; border-radius: 10px;
  background: #5A5049; color: #F0EBE1;   /* как у тёмной кнопки в покое (.cex-btn-ink) */
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 500;
  line-height: 1.5; letter-spacing: 0.01em; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
/* Подсказка столбца лежит у нижнего края нижней карточки, под её текстом —
   места по высоте там мало, поэтому она шире: короткая подпись идёт одной
   строкой и не наезжает на текст карточки. */
.map-tour-axis-tip--col { max-width: min(360px, 90vw); }
/* Заголовок строки легенды (из модала «Значение цвета такта») и клиентское
   пояснение — в одной строке через длинное тире (тире ставит _cexMapTourRender). */
/* «Готово» на последнем кадре «Как читать карту»: слову нужно больше места,
   чем стрелке (на телефоне ряд делится с «Назад»), — чуть шире и не переносится. */
#map-tour-done-btn { flex: 1.6 1 0; max-width: 180px; white-space: nowrap; padding-left: 10px !important; padding-right: 10px !important; }
.map-tour-legend-lead { font-weight: 600; }
/* Первая строка пояснения цвета — из чего он складывается (трудности + опоры…). */
.map-tour-legend-formula { display: block; font-size: var(--fs-small); color: #8A7E72; line-height: 1.4; margin-bottom: 1px; }
/* Значок кнопки «Как читать карту» внутри текста кадра ([btn] в
   _cexMapTourEmphasize): тот же размер, что на самой кнопке (22px);
   отрицательные поля по вертикали — чтобы значок не раздвигал строку текста. */
.map-tour-inline-icon { width: 25px; height: 25px; vertical-align: middle; margin: -5px 2px; }
/* Пока подсказки открыты — поля заметок/комментария под кадром не
   показываем (класс на #jm-pdf-bar переживает перерисовки строки метаданных
   в _cexConfigureMapForContext, которая ставит display этим строкам сама).
   Строку «Следующая карта с психологом» (#jm-next-map-row) — тоже. */
#jm-pdf-bar.map-tour-reading #jm-next-map-row,
#jm-pdf-bar.map-tour-reading #user-note-row,
#jm-pdf-bar.map-tour-reading #psych-comment-row,
#jm-pdf-bar.map-tour-reading #viewer-comment,
#jm-pdf-bar.map-tour-reading #jm-auto-review-bar,
#jm-pdf-bar.map-tour-reading #jm-comment-shifr-link,
#jm-pdf-bar.map-tour-reading #jm-note-shifr-link { display: none !important; }
/* Зелёные рамки карточек «Как читать карту» — своего стиля нет: это те же
   блоки .cex-cmp-maps-match, что у совпавших тактов в сравнении «Карты
   целиком» (правило ниже по файлу), см. _cexMapTourCardFrames (map-tour.js). */
/* После «Готово» кнопка «Как читать карту» в вернувшемся футере коротко
   пульсирует — кадр только что сказал, где её искать. */
@keyframes mapTourBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,143,105,0); }
  50%      { box-shadow: 0 0 0 6px rgba(107,143,105,0.45); }
}
.map-tour-btn-pulse { animation: mapTourBtnPulse 1.4s ease-in-out 3; border-color: #6B8F69 !important; }
@media (prefers-reduced-motion: reduce) {
  .map-tour-btn-pulse { animation: none; }
}

/* ── Плашки настроек ─────────────────────────────────────────── */
.cex-settings-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F5EEE1;
  border: 1.5px solid #CEC4B8;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  cursor: default;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.cex-settings-tile:hover, .cex-settings-tile:active {
  background: #EDE5D6;
  border-color: #9A8E84;
}

/* «Настройки функционала» подразделами на странице «Настройки владельца»:
   рамка-панель отделяет их от плиток выше. */
.cex-settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 16px 14px 14px;
  background: #FBF8F2;
  border: 1.5px solid #CEC4B8;
  border-radius: 16px;
}

/* Таблица «Обычный / Pro» (_cexProCompareRender, auth.js): страница /pro и
   экран владельца «Режим Pro». Колонка Pro — зелёным, как акцент сайта. */
.cex-pro-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: #28231E;
  background: #FFFFFF;
  border: 1.5px solid #CEC4B8;
  border-radius: 12px;
  overflow: hidden;
}
.cex-pro-table th, .cex-pro-table td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #EDE6DA;
}
.cex-pro-table thead th {
  border-top: none;
  background: #F8F4EE;
  font-weight: 600;
}
.cex-pro-table tbody th { font-weight: 500; width: 38%; }
.cex-pro-table td { color: #5A5049; }
.cex-pro-table td:last-child { background: #F0F7F0; color: #2D6B37; font-weight: 500; }
.cex-pro-table tfoot th, .cex-pro-table tfoot td { background: none; }
.cex-pro-table tfoot td:last-child { background: #F0F7F0; }
.cex-pro-table tfoot .cex-btn { width: 100%; padding-left: 8px; padding-right: 8px; font-size: var(--fs-small); }
.cex-pro-table thead th:last-child { background: #DCEEDC; color: #2D6B37; }

/* Подпись группы плиток («Настройки функционала»: Главная, Карта, Pro…) —
   тот же вид, что подписи групп в меню (.cex-menu-cap). Первая — без
   отступа сверху, остальные отделены от плиток предыдущей группы. */
.cex-settings-cap {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6C635C;
  margin: 10px 2px -4px;
}
.cex-settings-cap:first-child { margin-top: 0; }

/* Плитка опасного действия («Удалить аккаунт и данные» в «Настройках»):
   тот же вид плитки, но рамка и заголовок красным — как у .cex-btn-danger
   у кнопок. Отдельный класс, а не inline-цвет: см. правило про опасное
   действие в разделе «Кнопки футера» (public/CLAUDE.md). */
.cex-settings-tile.cex-settings-tile--danger { border-color: #FFAFA3; }
.cex-settings-tile.cex-settings-tile--danger:hover,
.cex-settings-tile.cex-settings-tile--danger:active { border-color: #C0392B; }
.cex-settings-tile.cex-settings-tile--danger .cex-settings-tile-title { color: #C0392B; }

/* Карточка карты в разделе «Мои согласия» (screens/my-consents.html) */
.cex-consent-card {
  background: #F7F2EA;
  border: 1.5px solid #CEC4B8;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.cex-consent-card-head {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #28231E;
}
.cex-consent-card-sub {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  color: var(--c-muted-text);
  margin-top: 2px;
}
.cex-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #5A5049;
  cursor: pointer;
}
.cex-consent-row input { margin-top: 3px; flex-shrink: 0; }
.cex-settings-tile-title {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #28231E;
  line-height: 1.3;
}
.cex-settings-tile-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cex-settings-tile-sub {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-meta);
  color: var(--c-muted-text);
  margin-top: 2px;
}
.cex-settings-tile-arrow {
  flex-shrink: 0;
  color: #9A8E84;
}

/* Ссылка справа на плитке-разделе (Вебинар → «Записавшиеся»/«Присутствовавшие»):
   плитка ведёт в список, а эта кнопка открывает публичный модал записи или
   приглашения. Квадратная, но заметно ниже футерных .cex-icon-btn — иначе
   растянула бы плитку по своей высоте. */
.cex-tile-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 0 !important;
  max-height: 34px;
  padding: 0 !important;
  box-sizing: border-box;
  align-self: center;
  line-height: 1;
}

/* ── «Памятки сайта» (scr-admin-memos, admin-memos.html) ────────────────
   Тело экрана: плашки-разделы столбиком, как на «Настройках функционала».
   Вторая плашка — <a download> на статичный PDF, а не <button>: у ссылки
   нужно снять браузерное подчёркивание и цвет, остальное даёт
   .cex-settings-tile. */
.cex-admin-memos {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
a.cex-settings-tile { text-decoration: none; color: inherit; box-sizing: border-box; }

/* ── Строка настройки с переключателем (движок) ─────────────────────── */
.cex-setting-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #F7F2E9;
  border: 1.5px solid #E2D9CC;
  border-radius: 12px;
}
.cex-setting-row-text { flex: 1; min-width: 0; }
/* Свёрнутые пункты «Настроек» психолога (psych-settings.html, решение
   владельца): каждая группа — <details class="cex-setting-row cex-setting-fold">,
   заголовок — <summary> с уголком справа (при переключателе — он стоит перед
   уголком; его клик гасится inline, чтобы не раскрывать пункт). Тело
   (.cex-setting-fold-body) — колонка с прежним gap группы. */
details.cex-setting-fold { display: block; padding: 0; }
.cex-setting-fold-head {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  list-style: none; cursor: default; user-select: none;
}
.cex-setting-fold-head::-webkit-details-marker { display: none; }
.cex-setting-fold-head > .cex-setting-row-title { flex: 1; min-width: 0; }
/* Уголок (#i-chev-down): свёрнуто — влево, раскрыто — вниз (как на главной у
   «Скрыть/показать карты»). */
.cex-setting-fold-chev { flex-shrink: 0; color: #9A8E84; transform: rotate(90deg); transition: transform .18s ease; }
details.cex-setting-fold[open] > .cex-setting-fold-head .cex-setting-fold-chev { transform: none; }
.cex-setting-fold-body { display: flex; flex-direction: column; align-items: stretch; padding: 0 14px 14px; }
/* Ссылка внутри подсказки психолога (#jm-psych-hint): «Записать на встречу
   через 3 месяца» в завершающей подсказке онлайн-сессии. */
.cex-hint-link { color: #4F6B4F; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cex-setting-row-title {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #28231E;
}
.cex-setting-row-sub {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-meta);
  color: var(--c-muted-text);
  line-height: 1.35;
  margin-top: 3px;
}
/* «Кнопки на главной» (scr-admin-intro-btns-settings, admin.js): у роли два
   списка (левое/правое положение) и под ними — превью пары. Превью — клон
   самого ряда главной (#intro-btns-client / #intro-btns-psych) с теми же
   классами, и правила ширины/кегля/раскладки у них общие (селекторы
   .intro-btns-client, .intro-psych-start, .intro-client-lbl рядом с id выше),
   поэтому владелец видит кнопки ровно такими, какими их видит человек на
   этом же экране. Своих размеров превью не задаёт. */
.cex-setting-row.intro-btns-set { flex-direction: column; align-items: stretch; gap: 10px; }
.intro-btns-set-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.intro-btns-set-field { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.intro-btns-set-field > span { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); }
.intro-btns-set-field .cex-filter { width: 100%; }
.intro-btns-set-preview-slot { display: flex; justify-content: center; }
.intro-btns-set-none { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); text-align: center; padding: 6px 0; }
.intro-btns-set-group { font-family: 'Jost', sans-serif; font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted-text); margin: 6px 2px -4px; }
.intro-btns-set-preview { pointer-events: none; }
/* Список адресатов в модале «Поделиться картой» (#share-pick-modal) — те же
   пункты, что в меню «Поделиться» на карте, во всю ширину окна. */
.share-pick-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }

/* Переключатель-движок (on/off) */
.cex-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #CEC4B8;
  cursor: default;
  transition: background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cex-switch[aria-checked="true"] { background: #8EA68C; }
.cex-switch:disabled { cursor: default; opacity: .55; }
.cex-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform .2s ease;
}
.cex-switch[aria-checked="true"] .cex-switch-knob { transform: translateX(20px); }

/* ── Compare mode ──────────────────────────────────────────────────── */
.cex-cmp-cb {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #8EA68C;
  background: #fff;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3;
  display: none;
  transition: background 0.15s, border-color 0.15s;
}
.cex-cmp-mode .cex-cmp-cb { display: block; }
/* Режим удаления (удержание карточки): кружок только у карт, которые можно удалить. */
.cex-del-mode .history-card-wrap:not([data-map-trash="1"]) .cex-cmp-cb { display: none; }
.cex-cmp-mode.cex-cmp-full .history-card-wrap:not(.cex-cmp-selected) .cex-cmp-cb { display: none; }
.cex-cmp-mode.cex-cmp-full .history-card-wrap:not(.cex-cmp-selected) { cursor: default; }
.cex-cmp-mode .history-card-wrap { cursor: default; }
.cex-cmp-mode .history-card-wrap.cex-cmp-selected .cex-cmp-cb {
  background: #8EA68C;
  border-color: #8EA68C;
}
.cex-cmp-mode .history-card-wrap.cex-cmp-selected {
  border-color: #8EA68C !important;
  box-shadow: 0 0 0 2px rgba(142,166,140,0.30);
}
.cex-cmp-mode .history-card-wrap.cex-cmp-legacy {
  opacity: 0.45;
  cursor: not-allowed;
}
.cex-cmp-exec-btn:not(:disabled) {
  color: #8EA68C;
  border-color: #8EA68C;
}
#btn-allmaps-compare,
#btn-allmaps-cmp-exec {
  margin-right: 0;
}

/* ── Compare result screen ─────────────────────────────────────────── */
.cex-cmp-preview-row {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}
.cex-cmp-preview-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
/* Превью-изображение карты прижимается к низу колонки. В flex-row у
   .cex-cmp-preview-row высота колонок выравнивается по самой высокой;
   margin-top:auto засасывает разницу — оба превью встают на одну
   горизонталь, даже если у одной карты раскрыт «подробнее», нет кода
   или нет описания. */
.cex-cmp-preview-col > .cex-cmp-preview-img {
  margin-top: auto;
}
.cex-cmp-preview-date {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #9A8E84;
  text-align: center;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.cex-cmp-preview-shifr {
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #5A5049;
  letter-spacing: 0.08em;
  background: #EDE6DA;
  border-radius: 4px;
  padding: 1px 6px;
}
.cex-info-shifr {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #5A5049;
  background: #EDE6DA;
  border-radius: 4px;
  padding: 0 6px;
}
.cex-cmp-preview-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #EDE6DA;
}
.cex-cmp-preview-img svg { display: block; width: 100%; height: 100%; }
.cex-cmp-overlay-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.cex-cmp-overlay-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.cex-cmp-overlay-label {
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  color: #5A5049;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
/* ── «Карты целиком» — обе карты сравнения рядом (scr-compare-maps,
   cexOpenCompareMaps в history.js) ─────────────────────────────────────── */
/* Ссылка под четырьмя превью: текстовая, тем же цветом и подчёркиванием, что
   ссылки в тексте редактора (.cex-rte-content a). */
/* Обе карты · Обзор — в одну строку, точка по центру между ссылками. */
/* Урезанное сравнение после отзыва доступа клиентом (_cexCmpRestricted,
   history.js): пояснение под превью вместо картин совпадений и ссылок. */
.cex-cmp-restricted-note {
  margin: 4px auto 20px;
  max-width: 460px;
  padding: 10px 14px;
  border: 1px dashed #CEC4B8;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: #5A5049;
  text-align: center;
}
.cex-cmp-maps-note {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-meta);
  color: #9A8E84;
  text-align: center;
  margin-bottom: 12px;
}
.cex-cmp-maps-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.cex-cmp-maps-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cex-cmp-maps-caption {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  color: #9A8E84;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Дата и имя автора карты (псевдоним) одной строкой — цвета те же, что над
   превью в обзоре сравнения (.cex-cmp-review-full-date / -name). */
.cex-cmp-maps-caption-date { color: #5C5047; }
.cex-cmp-maps-caption-name { color: #9A8E84; }
.cex-cmp-maps-caption-name::before { content: '\00a0\00b7\00a0'; color: #BEB4A8; }
/* Рамка под копию карты: высота ставится в JS под масштаб (_cexFitCompareMaps);
   до сборки копии место держит aspect-ratio (копии собираются после показа
   экрана). Приближенный такт (_cexCmpMapsSetZoom) режется краем рамки; клик
   по карте приближает такт, по приближенной — снова вся карта. */
.cex-cmp-maps-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1286 / 1293;
  overflow: hidden;
  cursor: zoom-in;
  /* тень карты (.cex-map-snapshot) режется краем рамки — рамка несёт свою */
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.10);
  /* фон карты: у пары одна под другой карта может отойти от края рамки
     (_cexCmpMapsZoomTarget, align) — поле за её краем того же белого */
  background: white;
}
/* Приближенную карту тянут мышью или пальцем (_cexCmpMapsPanDown): палец
   двигает карту, а не прокручивает экран. */
.cex-cmp-maps-frame.is-zoomed { cursor: grab; touch-action: none; }
.cex-cmp-maps-frame.is-panning { cursor: grabbing; }
/* Копия .map-container (см. _cexBuildMapSnapshot): те же размеры и фон, что у
   живой карты (общее правило .map-container ниже по файлу дополнено этим
   классом), но статичная — ни кликов, ни курсоров у потомков (у части
   элементов карты pointer-events/cursor заданы inline, отсюда !important). */
.cex-map-snapshot {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-select: none;
}
.cex-map-snapshot,
.cex-map-snapshot * {
  pointer-events: none !important;
  cursor: default !important;
}
/* Зелёная рамка совпавшего такта — по контуру стикера 284×284, тот же цвет,
   что у рамок на превью (_cexBuildMatchFramesSvg). */
.cex-cmp-maps-match {
  position: absolute;
  width: 284px;
  height: 284px;
  box-sizing: border-box;
  border: 6px solid #2D6B37;
  border-radius: 6px;
  z-index: 4;
}
/* Полноразмерные карты сравнения («Совместность/Изменения на картах»,
   копия .cex-map-snapshot в shadow DOM, _cexBuildMapSnapshot) — рамка тоньше.
   Тот же вид — у зелёных рамок цвета в «Как читать карту» на полноразмерной
   карте (map-tour.js, data-tour-frame): 3px, как в «Картах целиком». */
.cex-map-snapshot .cex-cmp-maps-match,
.cex-cmp-maps-match[data-tour-frame] { border-width: 3px; border-radius: 5px; }
@media (max-width: 699px), (orientation: portrait) {
  /* На узком экране и при вертикальном положении экрана (планшет, узкое
     высокое окно) две карты рядом нечитаемы — одна под другой, во всю
     ширину (stretch: с flex-start колонка сжалась бы до нуля — ширина рамки
     карты считается от ширины колонки, см. _cexFitCompareMaps). */
  .cex-cmp-maps-row { flex-direction: column; align-items: stretch; }
}

.cex-cmp-section-title {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #28231E;
  margin: 4px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #EDE6DA;
}
.cex-cmp-phrase-tact {
  margin-bottom: 14px;
}
.cex-cmp-phrase-tact-header {
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  color: #5A5049;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.cex-cmp-phrase-zone {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 4px 6px;
  border-radius: 6px;
  margin-bottom: 2px;
}
.cex-cmp-phrase-zone.cex-cmp-olive {
  background: rgba(176,181,60,0.16);
}
.cex-cmp-zone-label {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #9A8E84;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  width: 57px;
  flex-shrink: 0;
  padding-top: 3px;
  line-height: 1.2;
}
.cex-cmp-phrase-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  align-items: flex-end;
}
.cex-cmp-phrase-col > .cex-cmp-phrase-item { text-align: right; }
.cex-cmp-phrase-zone > .cex-cmp-phrase-divider ~ .cex-cmp-phrase-col { align-items: flex-start; }
.cex-cmp-phrase-zone > .cex-cmp-phrase-divider ~ .cex-cmp-phrase-col > .cex-cmp-phrase-item { text-align: left; }
.cex-cmp-phrase-item {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.4;
  border-radius: 3px;
  padding: 1px 4px;
  word-break: break-word;
}
.cex-cmp-phrase-item.ph-st-1  { background: rgba(255,210,160,0.68); color: rgba(50,30,20,0.80); }
.cex-cmp-phrase-item.ph-st-1b { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
.cex-cmp-phrase-item.ph-st-2  { background: rgba(60,45,30,0.12);    color: rgba(50,30,20,0.55); }
.cex-cmp-phrase-item.ph-st-0b { background: rgba(140,170,210,0.53); color: rgba(20,30,60,0.75); }
.cex-cmp-phrase-item.ph-st-none { color: rgba(80,72,64,0.45); }
.cex-cmp-phrase-header {
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #EDE6DA;
}
.cex-cmp-phrase-shifr {
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.10em;
  color: #5A5049;
  background: #EDE6DA;
  border-radius: 4px;
  padding: 2px 8px;
}
.cex-cmp-phrase-divider {
  display: none;
}

/* Статистика однозначных выборов (оранжевые + красные) в начале сравнения */
.cex-cmp-stats {
  margin-bottom: 16px;
}
.cex-cmp-stat-num {
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #5A5049;
  line-height: 1.3;
}
.cex-cmp-stats-total,
.cex-cmp-stats-divider {
  border-top: 1px solid #EDE6DA;
  margin-top: 2px;
  padding-top: 6px;
}
.cex-cmp-stats-total .cex-cmp-zone-label,
.cex-cmp-stats-total .cex-cmp-stat-num {
  color: #28231E;
}
/* Знак между числами статистики (>, <, =) и блеклое меньшее число. */
.cex-cmp-stats .cex-cmp-stat-sign {
  display: block;
  flex: 0 0 18px;
  text-align: center;
  font-family: 'Roboto Flex', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: #9A8E84;
}
.cex-cmp-stats .cex-cmp-stat-num.cex-cmp-stat-num--dim {
  color: #C4B9AD;
}

/* Wide-screen compare layout: two side-by-side areas inside #compare-content.
   Left area keeps the two card rows (previews + overlay); right area is the
   «Выделенные фразы» table. */
@media (min-width: 900px) {
  /* Flex-раскладка: левый блок карт занимает долю --cex-cmp-left (0.2…0.8 от
     ширины родителя), движочек-разделитель посередине шириной 6px, фразы
     справа дотягиваются до края. Положение движка запоминается в
     localStorage, поэтому браузер открывает сравнение в выбранной раскладке. */
  #compare-content {
    display: flex;
    flex-direction: row;
    column-gap: 0;
    align-items: flex-start;
  }
  #compare-content > .cex-cmp-cards {
    flex: 0 0 calc((100% - 6px) * var(--cex-cmp-left, 0.5) - 12px);
    margin-right: 12px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    /* Четыре превью выше окна — левая область прокручивается сама, вверх-вниз,
       не дальше высоты области сравнения (100% — от #compare-content). */
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #compare-content > .cex-cmp-resizer {
    flex: 0 0 6px;
    align-self: stretch;
    cursor: col-resize;
    position: sticky;
    top: 0;
    height: 100vh;
    background: transparent;
    z-index: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #compare-content > .cex-cmp-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #CEC4B8;
    transform: translateX(-50%);
    transition: background 0.15s, width 0.15s;
  }
  #compare-content > .cex-cmp-resizer:hover::before,
  #compare-content > .cex-cmp-resizer.cex-cmp-resizing::before {
    background: #8EA68C;
    width: 2px;
  }
  #compare-content > .cex-cmp-phrases {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 12px;
  }
}
/* Урезанное сравнение (_cexCmpRestricted): только превью и пояснение — одной
   колонкой по центру, без разделителя и пустой правой области. */
#compare-content.cex-cmp-content--rx { display: block; }
#compare-content.cex-cmp-content--rx > .cex-cmp-resizer { display: none; }
#compare-content.cex-cmp-content--rx > .cex-cmp-cards {
  max-width: 560px;
  margin: 0 auto;
  position: static;
  max-height: none;
}
@media (max-width: 899px) {
  /* На узких экранах движок-разделитель не нужен — вёрстка возвращается к
     вертикальной (cards над phrases). Скрываем его, чтобы не оставлял пустой
     полоски между блоками. */
  #compare-content > .cex-cmp-resizer { display: none; }
}

/* ── Универсальный rich-text редактор сайта (course-about.js, _cexRteAttach):
   страницы-тексты и «Показываемый текст» параметра автообзора. Кнопки панели
   — только иконки (подпись в title). ── */
.cex-rte-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; border: 1.5px solid #CEC4B8; border-radius: 10px;
  background: #F5EEE1;
}
.cex-rte-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 7px; border: 1.5px solid transparent;
  background: transparent; color: #5A5049;
  cursor: default; transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.cex-rte-btn:hover { border-color: #CEC4B8; color: #28231E; }
.cex-rte-btn.active { background: #8EA68C; border-color: #8EA68C; color: #fff; }
.cex-rte-btn-sep { width: 1px; align-self: stretch; background: #CEC4B8; margin: 2px 2px; }
/* Меню размера вставляемого логотипа/картинки — три иконки под кнопкой. */
.cex-rte-size-wrap { position: relative; display: inline-flex; }
.cex-rte-size-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  display: flex; gap: 4px; padding: 4px;
  background: #fff; border: 1.5px solid #CEC4B8; border-radius: 9px;
  box-shadow: 0 4px 14px rgba(40, 35, 30, .12);
}
.cex-rte-editor {
  min-height: 200px; max-height: 60vh; overflow-y: auto;
  box-sizing: border-box; padding: 12px 14px;
  border: 1.5px solid #CEC4B8; border-radius: 10px;
  background: #fff; outline: none; position: relative;
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* Компактная панель редактора (задачи): кнопки и иконки мельче. */
/* «Ссылка из списка» на панели подробностей задачи (tasks.js,
   _cexTaskLinksPickerBtn): список во всю ширину панели, под ней. */
.cex-task-links-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1.5px solid #CEC4B8; border-radius: 9px;
  box-shadow: 0 4px 14px rgba(40, 35, 30, .12);
}
.cex-task-links-pop-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; padding: 6px 8px; border: none; border-radius: 6px;
  background: transparent; cursor: default; font-family: 'Jost', sans-serif;
}
.cex-task-links-pop-item:hover { background: #F5EEE1; }
.cex-task-links-pop-title { font-size: var(--fs-body); color: #28231E; line-height: 1.3; }
.cex-task-links-pop-host { font-size: var(--fs-meta); color: var(--c-muted-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Заголовок в списке «Ссылки» (tasks.js) — та же бледная пунктирная линия,
   что у названий тактов в обзоре сравнения (.cex-cmp-shift-name.is-link). */
.cex-task-link-title { text-decoration: underline dotted #9A8E84; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cex-task-tile:hover .cex-task-link-title { color: #2D6B37 !important; text-decoration-color: #2D6B37; }
.cex-task-links-pop-msg { padding: 8px; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); }
.cex-rte-toolbar--sm { gap: 2px; padding: 4px; border-radius: 8px; }
.cex-rte-toolbar--sm .cex-rte-btn { width: 26px; height: 26px; border-radius: 6px; }
.cex-rte-toolbar--sm .cex-rte-btn .cex-icon { width: 15px; height: 15px; }
.cex-rte-toolbar--sm .cex-rte-btn-sep { margin: 3px 2px; }
/* Кегль текста задачи (список, подробности, название/критерий на экране
   правки): на телефоне — --fs-lead, на компьютере мельче — --fs-body. */
:root { --cex-task-fs: var(--fs-lead); }
@media (min-width: 768px) { :root { --cex-task-fs: var(--fs-body); } }
/* Ответственный и участники — одной строкой на любой ширине (как «Приоритет»
   и «Срок»); у участников чипы и «Добавить участника…» тоже в строку, поэтому
   оба поля стоят вровень, пока участников немного. */
.cex-task-people { display: flex; align-items: flex-start; gap: 10px; }
.cex-task-people > div { flex: 1 1 0; min-width: 0; }
.cex-task-co-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cex-task-co-line .cex-task-chips { display: contents; }
/* Название и критерий созданной задачи — текстом, как в списке (tasks.js,
   _cexTaskTextView); у кого есть право правки — по нажатию поле ввода. */
.cex-task-view { font-family: 'Jost', sans-serif; font-size: var(--cex-task-fs); line-height: 1.4; padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.cex-task-view--title { color: #28231E; }
.cex-task-view--desc { color: #6A5F56; }
.cex-task-view.is-editable { cursor: text; border-radius: 6px; }
.cex-task-view.is-editable:hover { background: rgba(206, 196, 184, 0.25); }
.cex-task-view.is-empty { color: #BEB4A8; }
/* Совместная правка задачи (tasks.js, _cexTaskLiveRenderFields): поле, где
   сейчас правит коллега, — рамка его цвета (outline: раскладку не сдвигает) и
   ярлычок с именем над правым краем, цвет — как у его кружка в шапке и
   курсора на доске. */
#task-f-title-box, #task-f-desc-box, #task-f-details-box { position: relative; }
.cex-task-live-on { outline: 2px solid var(--cex-peer, #9A8E84); outline-offset: 4px; border-radius: 8px; }
.cex-task-live-tag {
  position: absolute; right: 0; top: -12px; z-index: 2; max-width: 70%;
  padding: 1px 7px; border-radius: 8px; background: var(--cex-peer, #9A8E84);
  font-family: 'Jost', sans-serif; font-size: 12px; line-height: 1.5; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* Критерии готовности (tasks.js, _cexTaskCriteriaHtml): строки описания идут
   в ряд с переносом, у каждой галочка слева; отмеченные — бледнее и
   зачёркнуты зелёным. Кегль и цвет — от места показа. */
.cex-task-crit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 18px; white-space: normal; }
.cex-task-crit-item { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
.cex-task-crit-box { flex-shrink: 0; display: flex; align-items: center; height: 1.4em; cursor: default; }
.cex-task-crit-box input { margin: 0; width: 15px; height: 15px; accent-color: #8EA68C; cursor: default; }
.cex-task-crit-box input:disabled { cursor: default; }
.cex-task-crit-text { min-width: 0; word-break: break-word; }
.cex-task-crit-item.is-done .cex-task-crit-text { color: #8A7F75; text-decoration: line-through; text-decoration-color: #8EA68C; }
/* Вложенность задач: точки глубины перед названием в общих списках, подзадачи
   — списком с кружком состояния (не галочка: отмечают в самой задаче) (tasks.js, _cexTaskSubsHtml /
   _cexTaskRenderTree). */
.cex-task-dots { color: #8A7F75; font-weight: 700; letter-spacing: 2px; margin-right: 5px; }
.cex-task-subs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; font-family: 'Jost', sans-serif; line-height: 1.35; }
.cex-task-subs-label { color: #8A7F75; }
.cex-task-sub { display: flex; align-items: center; gap: 8px; min-width: 0; color: #28231E; }
.cex-task-sub-mark { flex-shrink: 0; width: 13px; height: 13px; box-sizing: border-box; border: 1.5px solid #CEC4B8; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; color: #fff; }
.cex-task-sub.is-done .cex-task-sub-mark { background: #8EA68C; border-color: #8EA68C; }
.cex-task-sub.is-done .cex-task-sub-mark::after { content: '\2713'; }
.cex-task-sub-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cex-task-sub.is-done .cex-task-sub-title { color: #8A7F75; text-decoration: line-through; text-decoration-color: #8EA68C; }
.cex-task-sub-title[role="button"] { cursor: default; }
.cex-task-sub-title[role="button"]:hover { text-decoration: underline; text-decoration-color: #CEC4B8; }
.cex-task-sub button { flex-shrink: 0; border: none; background: none; padding: 3px; line-height: 0; cursor: default; color: #9A8E84; }
.cex-task-sub button:hover { color: #B5524A; }
.cex-task-subs--edit { font-size: var(--cex-task-fs); gap: 6px; margin-bottom: 8px; }
.cex-task-subs--edit:empty { display: none; }
/* Выбор задачи с поиском (tasks.js, _cexTaskPickerAttach): поле .cex-filter
   во всю ширину с лупой справа; у родительской рядом — квадрат «открыть её».
   Меню — общее .cex-filter-menu под полем; длинные названия переносятся,
   строка под стрелками клавиатуры — .is-active. */
/* Футер списка задач: группы кнопок («Пользователь», «Главное»,
   screens/admin-tasks.html) разделены зазором, как группы футера карты
   (_CEX_FOOTER_GAP / _CEX_FOOTER_GAP_PHONE / _CEX_FOOTER_INNER_GAP, map.js). */
#tasks-footer-btns { gap: 22px; }
#tasks-footer-btns .tasks-fgrp { display: flex; gap: 4px; }
@media (max-width: 480px) { #tasks-footer-btns { gap: 10px; } }
.cex-task-pick-row { display: flex; align-items: center; gap: 6px; }
input.cex-task-pick {
  flex: 1 1 auto; width: 100%; padding-right: 28px; text-overflow: ellipsis;
  background: var(--cex-filter-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8E84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat right 9px center / 14px 14px;
}
input.cex-task-pick:disabled { opacity: .55; background-image: none; padding-right: 10px; }
/* Крестик очистки в полях поиска — значок сайта вместо синего системного
   (Chrome/Safari рисуют его сами у type="search"): тот же штрих и цвет, что у
   лупы справа; под курсором темнее. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin: 0 4px 0 6px; cursor: default;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8E84' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
input[type="search"]::-webkit-search-cancel-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5049' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.cex-task-pick-open {
  flex-shrink: 0; width: var(--cex-filter-h); height: var(--cex-filter-h); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1.5px solid #CEC4B8; border-radius: 6px; background: var(--cex-filter-bg); color: #5A5049; cursor: default;
}
.cex-task-pick-open:hover { border-color: #9A8E84; }
.cex-task-pick-open .cex-icon { width: 16px; height: 16px; }
#task-f-children-wrap input.cex-task-pick { display: block; }
/* «Новая подзадача» — тёмный квадрат «+» высотой поля, как у окна «Добавить
   задачу» на доске (.wb-task-new-btn). */
.cex-task-pick-new { flex: 0 0 auto; width: var(--cex-filter-h); height: var(--cex-filter-h); min-height: 0; padding: 0; border-radius: 6px; }
.cex-task-pick-new .cex-icon { width: 16px; height: 16px; }
.cex-task-pick-menu .cex-filter-menu-item { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.cex-task-pick-menu .cex-filter-menu-item.is-active { background: #F0EBE1; }
.cex-task-pick-menu .cex-filter-menu-item.is-on.is-active { background: #E3ECE1; }
.cex-task-pick-menu .cex-filter-menu-item.is-done { color: #8A7F75; }
.cex-task-pick-menu .cex-filter-menu-item.is-none { color: #5A5049; }
.cex-task-pick-note { padding: 7px 10px; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #8A7F75; }
/* Исполнители задачи — чипы имён с «×» (tasks.js, _cexTaskRenderCo). */
.cex-task-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cex-task-chips:empty { display: none; }
.cex-task-chip { display: inline-flex; align-items: center; gap: 4px; height: var(--cex-filter-h); box-sizing: border-box; padding: 0 4px 0 10px; border: 1.5px solid #CEC4B8; border-radius: 15px; background: var(--cex-filter-bg); font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #28231E; }
.cex-task-chip--ro { padding-right: 10px; }
.cex-task-chip button { border: none; background: none; padding: 3px; line-height: 0; cursor: default; color: #9A8E84; }
.cex-task-chip button:hover { color: #B5524A; }
/* Квадратная «+» комментария — высотой фильтра (30px), иконка по центру. */
.cex-task-add-btn { flex-shrink: 0; width: var(--cex-filter-h); height: var(--cex-filter-h); min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
/* Редактор в задаче (подробности, комментарии) — ниже, чем на страницах. */
.cex-task-rte { min-height: 110px; max-height: 45vh; }
/* Подробности в свёрнутой части карточки: слева кто и где, справа даты. */
.cex-task-meta { display: flex; gap: 0 16px; font-size: var(--cex-task-fs); color: #8A7F75; line-height: 1.4; }
.cex-task-meta-col { flex: 1 1 auto; min-width: 0; }
.cex-task-meta-col--dates { flex: 0 0 auto; }
/* Сортировка по приоритету: заголовок группы — точка цвета приоритета,
   подпись и число задач. */
.cex-task-prio-head { display: flex; align-items: center; gap: 8px; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5A5049; letter-spacing: 0.02em; }
.cex-task-prio-head:not(:first-child) { margin-top: 8px; }
/* «Порядок досок…» (tasks.js, _cexTasksOpenBoardSort): строки тянут пальцем;
   глубина ветки — отступ слева и точка по центру строки перед названием. */
.cex-bsort-list { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, calc(var(--cex-vvh, 100vh) - 300px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cex-bsort-row {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; box-sizing: border-box; min-height: 42px;
  padding: 6px 4px 6px 12px; border: 1.5px solid #DDD5CB; border-radius: 10px; background: #F8F4EE;
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #28231E; cursor: grab;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cex-bsort-row.is-lifted { display: none; }
.cex-bsort-dot { width: 5px; height: 5px; border-radius: 50%; background: #9A8E84; flex-shrink: 0; }
/* Окно растёт по самому длинному названию доски (не уже компактного 340px,
   не шире экрана); названия в одну строку — не влезло, обрезается «…». */
#task-board-sort-modal .cex-modal-box { width: max-content; min-width: min(340px, 90vw); max-width: min(720px, 94vw); }
.cex-bsort-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cex-bsort-grip { flex-shrink: 0; width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; color: #9A8E84; touch-action: none; }
.cex-bsort-grip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cex-bsort-ph { border-style: dashed; border-color: #9A8E84; background: transparent; cursor: default; }
/* Корзина в строке — удалить доску (окно task-board-del-modal поверх). */
.cex-bsort-del {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px; background: none;
  display: flex; align-items: center; justify-content: center; color: #9A8E84; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.cex-bsort-del:hover { color: #B5524A; background: rgba(181, 82, 74, 0.08); }
.cex-bsort-del .cex-icon { width: 17px; height: 17px; }
.cex-bsort-ghost .cex-bsort-del { display: none; }
.cex-bsort-ghost {
  position: fixed; z-index: 100000; pointer-events: none; cursor: grabbing;
  border-color: #9A8E84; background: #FFFDF9; box-shadow: 0 6px 18px rgba(40, 35, 30, 0.18); opacity: 0.96;
}
.cex-bsort-more { flex-shrink: 0; padding-right: 10px; font-size: var(--fs-meta); color: var(--c-muted-text); }
.cex-task-prio-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cex-task-prio-count { color: var(--c-muted-text); font-size: var(--fs-meta); }
.cex-task-rte--comment { min-height: 70px; }
.cex-rte-editor.cex-rte-empty:before {
  content: attr(data-placeholder); color: #BEB4A8; pointer-events: none;
  position: absolute; top: 12px; left: 14px;
}
.cex-rte-status {
  font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text);
  transition: opacity .3s ease;
}
/* Типографика отрендеренного описания курса — общая для просмотра и редактора,
   чтобы результат форматирования выглядел одинаково сразу в поле правки. */
.cex-rte-content { font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #28231E; line-height: 1.7; word-break: break-word; }
.cex-rte-content p { margin: 0 0 12px; }
.cex-rte-content p:last-child { margin-bottom: 0; }
/* Заголовок и подзаголовок различаются НЕ размером (24 против 19 на глаз почти
   не читалось), а типом набора — как в книжной вёрстке: заголовок раздела —
   крупная антиква с отбивкой-линейкой, подзаголовок — мелкий разрядкой в
   капители гротеском (тот же приём, что у надзаголовков разделов админки). */
.cex-rte-content h2 {
  font-family: 'Cormorant Garamond', serif; font-size: var(--fs-serif-l); font-weight: 600;
  color: #28231E; line-height: 1.2; margin: 26px 0 12px;
  padding-bottom: 7px; border-bottom: 1.5px solid #CEC4B8;
}
.cex-rte-content h2:first-child { margin-top: 0; }
.cex-rte-content h3 {
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: #5A5049; line-height: 1.4; margin: 22px 0 6px;
}
.cex-rte-content h3:first-child { margin-top: 0; }
.cex-rte-content ul, .cex-rte-content ol { margin: 0 0 12px; padding-left: 22px; }
.cex-rte-content li { margin-bottom: 4px; }
.cex-rte-content blockquote {
  margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid #8EA68C;
  color: #5A5049; font-style: italic;
}
.cex-rte-content a { color: #6C8C68; text-decoration: underline; }
.cex-rte-content b, .cex-rte-content strong { font-weight: 600; }
/* Логотип сайта, вставляемый через панель инструментов — тот же стиль, что
   в шапке (.cex-logo), с тремя вариантами размера. */
.cex-rte-content .cex-rte-logo {
  display: inline-block; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  letter-spacing: .06em; color: #28231E; line-height: 1.3; margin: 4px 0;
}
.cex-rte-content .cex-rte-logo em { color: #8EA68C; font-style: normal; }
.cex-rte-content .cex-rte-logo-sm { font-size: 17px; }
.cex-rte-content .cex-rte-logo-md { font-size: 26px; }
.cex-rte-content .cex-rte-logo-lg { font-size: 38px; }
/* Картинки, вставленные через панель инструментов. Отдельный блок по центру
   колонки (обтекания текстом нет — колонка узкая, на телефоне обтекание
   превращается в лесенку из двух-трёх слов). Три размера — как у логотипа. */
/* Страховка на случай картинки без класса размера (санитайзер оставляет сам
   тег, если class не из белого списка) — она не должна распирать колонку. */
.cex-rte-content img { max-width: 100%; height: auto; }
.cex-rte-content .cex-rte-img {
  display: block; height: auto; margin: 14px auto;
  border-radius: 10px; max-width: 100%;
}
.cex-rte-content .cex-rte-img-sm { width: 40%; }
.cex-rte-content .cex-rte-img-md { width: 70%; }
.cex-rte-content .cex-rte-img-lg { width: 100%; }
/* В поле правки картинка — атомарный объект (contenteditable=false): показываем
   это рамкой при наведении, чтобы было понятно, что она выделяется и удаляется
   целиком, а не «редактируется внутри». */
.cex-rte-editor .cex-rte-img { cursor: default; }
.cex-rte-editor .cex-rte-img:hover { outline: 2px solid #8EA68C; outline-offset: 2px; }

/* Поле «Для психологов» из описания фразы версии (history.js,
   _cexVerNotePsychRow; показ — _cexNotePsychNode, map.js): во всплывающем
   окошке определения на «Устройстве карты» и в модале комментария. Текст
   общего редактора, но кеглем и отбивками окошка, а не страницы-текста. */
.cex-note-psych--after { margin-top: 10px; padding-top: 8px; border-top: 1px solid #E6DFD4; }
.cex-note-psych-label { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); line-height: 1.5; margin-bottom: 4px; }
.cex-note-psych-body.cex-rte-content { font-size: var(--fs-body); color: #5A5049; line-height: 1.55; }
.cex-note-psych-body.cex-rte-content p,
.cex-note-psych-body.cex-rte-content ul,
.cex-note-psych-body.cex-rte-content ol,
.cex-note-psych-body.cex-rte-content blockquote { margin: 0 0 6px; }
.cex-note-psych-body.cex-rte-content > :last-child { margin-bottom: 0; }
.cex-note-psych-body.cex-rte-content h2 { font-size: var(--fs-serif-s); margin: 10px 0 6px; padding-bottom: 4px; }
.cex-note-psych-body.cex-rte-content h3 { font-size: var(--fs-small); margin: 10px 0 4px; }
.cex-note-psych-body.cex-rte-content h2:first-child,
.cex-note-psych-body.cex-rte-content h3:first-child { margin-top: 0; }
/* Поле правки в модале черновика — ниже, чем у страниц-текстов. */
.cex-rte-editor.cex-note-psych-editor { min-height: 110px; max-height: 40vh; font-size: var(--fs-body); line-height: 1.55; }

/* ── Модал «Службы помощи» (#help-services-modal, index.html) ──────────────
   Краткий список телефонов поверх того экрана, с которого его открыли («Обзор
   карты», «Экстренная помощь») — отдельной страницей он больше не бывает, см.
   cexOpenHelpServicesModal (course-about.js). Ширина — как у обычного модала,
   а вот высота ограничена экраном: список длиннее одной плашки, и прокручивается
   он ВНУТРИ окна (.cex-help-scroll), чтобы заголовок с крестиком оставались на
   месте. Раньше это была страница (.cex-help-wrap внутри .cex-rte-content),
   поэтому прежние селекторы, перебивавшие ссылки редактора, здесь не нужны:
   внутри модала чужих правил для ссылок нет. */
.cex-help-box { width: min(460px, 92vw); padding: 26px 22px; display: flex; flex-direction: column; max-height: 88vh; }
.cex-help-scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0;
  /* Место справа под полосу прокрутки, чтобы текст не упирался в неё. */
  padding-right: 4px;
}
.cex-help-lead {
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #5C5047; line-height: 1.5;
  border-left: 3px solid #8EA68C; padding: 2px 0 2px 12px; margin-bottom: 14px;
}
/* «Скачать памятку» — главное действие модала и потому первое, ДО списка:
   полный список служб живёт в самой памятке, и за ней сюда и приходят.
   Ссылка-кнопка (скачивание статикой, см. index.html), поэтому подчёркивание
   снимаем явно. */
.cex-help-dl {
  display: flex; width: 100%; text-decoration: none; margin-bottom: 16px;
  gap: 8px;
}
/* 112 — не пункт списка, а первое, что видно в окне. */
.cex-help-112 {
  display: flex; align-items: center; gap: 14px;
  background: #F5EEE1; border: 1.5px solid #9A8E84; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
.cex-help-112-num {
  font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 600;
  color: #28231E; line-height: 1; text-decoration: none; flex-shrink: 0;
}
.cex-help-112-num:hover { color: #6C8C68; }
.cex-help-112-txt { font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5C5047; line-height: 1.45; }
.cex-help-svc {
  background: #F8F4EE; border: 1.5px solid #CEC4B8; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.cex-help-svc-name {
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 600;
  color: #28231E; line-height: 1.3;
}
/* Контакт — строкой на всю ширину плашки: это цель нажатия пальцем, и она не
   должна быть шириной в номер. */
.cex-help-svc-contact {
  display: block; font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 600;
  color: #6C8C68; text-decoration: none; line-height: 1.35; margin-top: 5px;
  word-break: break-word;
}
.cex-help-svc-contact:hover { color: #28231E; }
/* Два номера одной службы, которые в памятке стоят рядом (детский телефон
   доверия, московская служба) — в одну строку, а не двумя отдельными
   контактами. */
.cex-help-svc-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.cex-help-svc-or { font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: var(--c-muted-text); margin-top: 5px; }
.cex-help-svc-contact-sub { font-size: var(--fs-meta); font-weight: 400; color: var(--c-muted-text); }
.cex-help-svc-note { font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5C5047; line-height: 1.45; margin-top: 6px; }
.cex-help-svc-note a { color: #6C8C68; }
/* Сноска вроде «В России признан «иноагентом»» — тем же приёмом, что .mark в
   самой памятке (tools/pamyatka/pamyatka.html): мельче и тише заметки. */
.cex-help-svc-mark { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #9A8E84; line-height: 1.4; margin-top: 4px; }
.cex-help-foot {
  font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); line-height: 1.5;
  border-top: 1.5px solid #CEC4B8; margin-top: 16px; padding-top: 12px;
}
/* «Записаться на консультацию» — последнее в окне, после сноски: та же тёмная
   кнопка, что «Скачать памятку» наверху (.cex-btn-ink), на всю ширину. */
.cex-help-consult { display: flex; width: 100%; margin-top: 14px; }

/* Инфоплашки сводки в разделах админки (_cexAdminStatGrid, admin.js) — на
   узких экранах 2 столбика, на широких (тот же порог, что у compare-content)
   в один ряд по 4, чтобы сводка не растягивала экран по высоте. */
.cex-admin-stat-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .cex-admin-stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Линия времени в списках карт («Мои карты», «История консультаций») ─────
   Включается кнопкой-календарём в футере (cexSetTimelineStep, history.js):
   список перестраивается в цепочку отрезков-периодов выбранного шага (день /
   неделя / месяц / год), слева — сплошная вертикальная линия с точкой на
   каждом периоде, справа — подпись периода и карты, созданные внутри него.
   Периоды без карт остаются в цепочке (тонкая точка, приглушённая подпись) —
   иначе линия перестаёт быть шкалой времени; длинные пустые промежутки
   сворачиваются в один отрезок-пропуск. */
.cex-tl-on { gap: 0 !important; }

.cex-tl-seg { display: flex; align-items: stretch; gap: 10px; flex-shrink: 0; }
.cex-tl-rail { position: relative; flex: 0 0 14px; width: 14px; }
.cex-tl-rail::before {
  content: '';
  position: absolute;
  left: 6px; top: 0; bottom: 0;
  width: 2px;
  background: #CEC4B8;
}
/* Линия не торчит выше первой и ниже последней точки */
.cex-tl-seg:first-child .cex-tl-rail::before { top: 10px; }
.cex-tl-seg--last .cex-tl-rail::before { bottom: auto; height: 12px; }
.cex-tl-dot {
  position: absolute;
  left: 1px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #F0EBE1;
  border: 2px solid #8EA68C;
  box-sizing: border-box;
}
.cex-tl-seg--empty .cex-tl-dot {
  left: 4px; top: 7px;
  width: 6px; height: 6px;
  background: #CEC4B8;
  border-color: #CEC4B8;
}

.cex-tl-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
}
.cex-tl-seg--empty .cex-tl-body { padding-bottom: 8px; }
.cex-tl-seg--last .cex-tl-body { padding-bottom: 0; }

.cex-tl-label {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #5A5049;
}
.cex-tl-seg--empty .cex-tl-label { font-size: var(--fs-meta); color: var(--c-muted-text); }

.cex-tl-cards { display: flex; flex-direction: column; gap: 10px; }

/* Отметка «Сегодня» (решение владельца, _cexTlTodaySeg в history.js): крупная
   тёмно-зелёная точка с мягким ободком на линии и подпись с датой. Граница
   между будущим (пунктир запланированного, встречи) и прошлым. Точка шире
   обычной (16px), поэтому сдвинута так, чтобы её центр остался на линии. */
.cex-tl-seg--today .cex-tl-dot {
  left: -1px; top: 2px;
  width: 16px; height: 16px;
  background: #5A7A58;
  border: 3px solid #DCE7DA;
  box-shadow: 0 0 0 1px #8EA68C;
}
.cex-tl-seg--today .cex-tl-label {
  font-size: var(--fs-body);
  font-weight: 500;
  color: #3F5E3D;
}
.cex-tl-seg--today .cex-tl-body { padding-bottom: 16px; }
.cex-tl-seg--today.cex-tl-seg--last .cex-tl-body { padding-bottom: 0; }

/* Запланированные карты в «Моих картах» (_cexPlannedMount, followup.js):
   «Следующая карта с психологом» и «… самостоятельно» — плашки с пунктирной
   рамкой выше всех карт; при линии времени — отрезки с пунктирной линией. */
.cex-plan-card {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px;
  border: 1.5px dashed #A9BFA7;
  border-radius: 12px;
  background: #F7F2EA;
  font-family: 'Jost', sans-serif;
}
.cex-plan-kind { font-size: var(--fs-meta); color: #5A7A58; letter-spacing: 0.02em; }
.cex-plan-when { font-size: var(--fs-body); color: #28231E; }
.cex-plan-sub { font-size: var(--fs-meta); color: var(--c-muted-text); line-height: 1.6; }
.cex-plan-repeat { display: flex; margin-top: 6px; }
.cex-tl-seg--planned .cex-tl-rail::before {
  background: repeating-linear-gradient(to bottom, #CEC4B8 0 4px, transparent 4px 8px);
}
.cex-tl-seg--planned .cex-tl-dot { border-style: dashed; }

/* Кнопка-календарь остаётся тёмной, пока линия времени включена. Отдельный
   класс, а не .hamburger-active: тот снимается при открытии любого другого
   меню (cexCloseHamburgers), а подсветка режима должна держаться. */
.cex-tl-btn-on {
  background: #28231E !important;
  color: #F0EBE1 !important;
  border-color: #28231E !important;
}


/* ═══════════════════ Низкий экран: компактные отступы ═════════════════════
   Продолжение шкалы размеров (см. :root в начале файла): текст не мельчает,
   место экономят отступы шапки/футера/панелей. Правила стоят в конце файла
   намеренно — они должны перебивать одноимённые базовые выше при той же
   специфичности. */
@media (max-height: 640px) {
  .cex-hdr { padding-top: 8px; padding-bottom: 8px; }
  .rnd-bar { padding-top: 8px; padding-bottom: 8px; }
  .rnd-top { margin-bottom: 6px; }
  .rnd-container { padding: 14px 20px; }
  .sel-zone { padding: 10px 14px; }
  .ph { padding-top: 8px; padding-bottom: 8px; margin-bottom: 5px; }
  .cex-footer { padding-top: 8px; padding-bottom: 8px; }
  .cex-tip-psych, .cex-footer .cex-tip-online, #jm-psych-hint { padding: 6px 10px 6px 12px; margin-bottom: 6px; }
  /* Главная: воздух между центральным блоком и шапкой/футером */
  #intro-center-wrap { padding-block: 18px 22px; }
  .intro-sub { margin-bottom: 14px !important; }
  /* Строка «превью + кнопки»: при кегле кнопок 14–15px блоку кнопок нужно
     232px, иначе строка переносится в колонку и уходит под сгиб. Уже боковые
     поля и зазор — та же строка помещается на 375px (на 360px переносится,
     как и раньше, и прокручивается). Идёт после #intro-btns-client с
     max-width:220px !important выше — та же специфичность, побеждает порядок. */
  #intro-body { padding-left: 12px !important; padding-right: 12px !important; }
  #scr-intro:not(.intro--anon) .intro-action-row { gap: 14px; }
  #intro-btns-client, .intro-btns-client { max-width: 232px !important; }
}

/* ═══════════════════ Раунд: карточка не уезжает верхом за край ═══════════
   justify-content:center у ПЕРЕПОЛНЕННОГО flex-контейнера прячет верх
   содержимого за недосягаемым краем — прокрутка до него не достаёт (на
   телефоне карточка с длинным списком фраз обрезала номер и подпись, см.
   комментарий у .rnd-container выше: там центрирование выбрано сознательно,
   но обрезка верха — его побочный эффект). Авто-поля у .rnd-content дают
   обе цели сразу: помещается — карточка по центру, как была; не помещается —
   прижата к верху, номер и подпись видны, список прокручивается. */
.rnd-container { justify-content: flex-start; }
.rnd-container > .rnd-content { margin-block: auto; }

/* ═══════════════════ Раунд, узкий экран: полоса прогресса + счётчик ══════
   Экономим строку над карточкой: вопрос области на всю ширину, под ним
   полоса прогресса и «5 / 16» в ОДНОЙ строке. Разметка round.html не
   меняется — обёртки .rnd-top/.rnd-top-info «растворяются» (display:contents),
   а .rnd-bar раскладывает вопрос, бейдж-цифру студента, полосу и счётчик
   сеткой. Правило @media (max-width:380px) у .rnd-top-info выше при этом
   не действует — display:contents перебивает его flex-direction. */
@media (max-width: 480px) {
  .rnd-bar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "badge tag tag" "prog prog ctr"; align-items: center; row-gap: 8px; column-gap: 0; }
  .rnd-top, .rnd-top-info { display: contents; }
  #cex-stu-num-rndq { grid-area: badge; margin: 0 8px 0 0 !important; }
  #rnd-tag  { grid-area: tag; }
  .prog     { grid-area: prog; }
  .rnd-ctr  { grid-area: ctr; padding: 0 0 0 12px; align-self: center; }
}

/* Поля ввода — 16px на любом экране (см. --fs-input). Перебивает исторические
   inline font-size на textarea/input, где они ещё остались. */
.reg-input, .cex-modal-input, .cex-comment-input { font-size: var(--fs-input) !important; }


/* ═══════════════════ Главная: превью карт на планшете и компьютере ═══════
   Пара карт (#intro-map-pair, _cexIntroPairCardEl в auth.js): размеры через
   классы, база — 104px, как было inline. На планшете и компьютере (ширина от
   768px и высота от 701px — ниже этой высоты действует «строчный» режим
   max-height:700px выше) превью своей карты и пара заметно крупнее, а подписи
   под ними (бейдж «Ваша текущая карта», «Ваши карты с перерывом…», ссылка)
   на шаг крупнее — --fs-ui вместо --fs-small. На телефоне ничего из этого
   не меняется. !important у подписей — перебивает inline font-size у
   #intro-map-pair-cap и у ссылки в нём (auth.js). */
.intro-pair-card { width: 104px; }
#intro-map-pair .intro-pair-img { width: 104px; height: 104px; }
/* С 481px (планшет в вертикали) — тот же вид, что на компьютере. */
@media (min-width: 481px) and (min-height: 701px) {
  #scr-intro:not(.intro--anon) .intro-map-preview-img { width: 200px; height: 200px; }
  .intro-pair-card { width: 168px; }
  #intro-map-pair .intro-pair-img { width: 168px; height: 168px; }
  #scr-intro:not(.intro--anon) .intro-map-preview-cap,
  #intro-map-pair-cap,
  #intro-map-pair-cap button { font-size: var(--fs-ui) !important; }
}

/* Блок ниже остался без заголовка @media после слияния веток (20.10) и
   действует на любой ширине — так главная и выглядит сейчас, поэтому правила
   оставлены как есть. Лишняя закрывающая скобка после них убрана: браузер
   принимал её за начало следующего правила и выбрасывал его — так пропала
   сетка 4×4 тактов в галерее иллюстраций (.cex-examples-grid ниже). */
.intro-pair-card { width: min(190px, 30vw * var(--cex-app-k, 1)); }
#intro-map-pair .intro-pair-img { width: min(190px, 30vw * var(--cex-app-k, 1)); height: min(190px, 30vw * var(--cex-app-k, 1)); }
#scr-intro:not(.intro--anon) .intro-map-preview-cap,
#intro-map-pair-cap,
#intro-map-pair-cap button { font-size: var(--fs-ui) !important; }

/* ═══════════════════ Примеры карт (examples.js, screens/examples.html) ═════
   Сетка 4×4 карточек такта — как на карте, строка 4 сверху; выбранная
   карточка тёмная, без примеров — приглушённая. Плитка примера в списке —
   превью карты слева, как у списков карт. Тот же набор классов у сетки
   чекбоксов в модале «В примеры» и в форме правки (.cex-examples-picker). */
.cex-examples-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  /* На компьютере сетка не растягивается на всю ширину: плитка — номер и
     счётчик, широкой ей быть незачем. */
  max-width: 360px;
  width: 100%;
  margin-inline: auto;   /* по центру страницы */
}
/* Список иллюстраций под сеткой — столбиками по ширине экрана: один на
   телефоне, два на планшете, три на широком экране. */
.cex-examples-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
@media (min-width: 700px)  { .cex-examples-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cex-examples-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Плитка такта — одна строка: номер слева, счётчик иллюстраций справа.
   Слова «смысла» на плитке нет — оно у выбранного такта в заголовке списка
   (.cex-examples-list-head) и в подсказке плитки. Фон — цвет «критической
   ситуации» строки такта, те же тона, что у шапки карточки на карте
   (.rowN .card-header выше); класс rowN ставит _cexExamplesRender. */
.cex-examples-tile {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 38px;
  padding: 0 6px;
  background: #F5EEE1;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: default;
  font-family: 'Jost', sans-serif;
  color: #3F403E;
  transition: border-color 0.15s;
}
.cex-examples-tile.row1 { background: #C5C5B3; }
.cex-examples-tile.row2 { background: #8EA68C; }
.cex-examples-tile.row3 { background: #ADC9BB; }
.cex-examples-tile.row4 { background: #88ADAC; }
.cex-examples-tile:hover { border-color: #5A5049; }
.cex-examples-tile--empty { opacity: 0.55; }
.cex-examples-tile--on { border-color: #28231E; box-shadow: inset 0 0 0 1.5px #28231E; opacity: 1; }
.cex-examples-tile-id { font-size: 13px; font-weight: 600; line-height: 1; }
.cex-examples-tile-n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255,255,255,0.55);
}
.cex-examples-tile-n:empty { display: none; }
.cex-examples-list-head {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-serif-s);
  font-weight: 600;
  color: #5A5049;
  margin-top: 4px;
}
.cex-examples-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1.5px solid #CEC4B8;
  border-radius: 12px;
  cursor: default;
  text-align: left;
  transition: border-color 0.15s;
}
.cex-examples-item:hover { border-color: #9A8E84; }
.cex-examples-item-thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #EDE6DA; }
.cex-examples-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cex-examples-item-title { font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 600; color: #28231E; line-height: 1.3; word-break: break-word; }
.cex-examples-item-meta { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); }
.cex-examples-item-meta--draft { color: #B07A3A; }
.cex-examples-item-text {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  color: #5C5047;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Сетка чекбоксов «какие карточки иллюстрирует» (модал и форма правки). */
.cex-examples-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cex-examples-pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: #F5EEE1;
  border: 1.5px solid #CEC4B8;
  border-radius: 9px;
  cursor: default;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #28231E;
  user-select: none;
}
.cex-examples-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.cex-examples-pick--on { background: #5A5049; border-color: #5A5049; color: #F0EBE1; }
.cex-examples-label { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); font-weight: 500; }
.cex-examples-input, .cex-examples-ta {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #CEC4B8;
  border-radius: 10px;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-input);
  color: #28231E;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.cex-examples-ta { resize: none; overflow: hidden; line-height: 1.45; }
.cex-examples-input:focus, .cex-examples-ta:focus { border-color: #9A8E84; }
.cex-examples-cmt { display: flex; flex-direction: column; gap: 4px; }
.cex-examples-cmt-label { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #5A5049; font-weight: 600; }
/* Кнопка-меню режима «Разработки карты» (btn-map-dev-mode) темноватая (те же
   тона, что .cex-btn-mid — тёмная кнопка в покое), пока открыт раздел
   (_cexMapDevCurrentSection): свой класс, а не .hamburger-active — тот
   снимается при открытии любого другого меню (cexCloseHamburgers), а
   подсветка режима должна держаться. */
.map-dev-mode-on {
  background: #5A5049 !important;
  color: #F0EBE1 !important;
  border-color: transparent !important;
}
/* Пункты меню со значками — значок слева от подписи, ОДНИМ СТОЛБИКОМ: все
   значки на одном и том же отступе от левого края кнопки (justify-content:
   flex-start, а не center — при центрировании всей пары «значок+подпись» её
   общая ширина зависит от длины подписи, и значки у разных пунктов одного
   меню съезжали по горизонтали; нагляднее всего было на «День»/«Неделя»/
   «Месяц»/«Год», history-tl-menu). Подпись — тоже к левому краю (text-align:
   left, а не унаследованный от базового .cex-dropdown-menu-btn center):
   иначе у двухстрочной подписи (переносится по ширине меню, например
   «Редактировать карту») вторая строка центрировалась бы под первой вместо
   ровного левого края, как в обычном тексте. Один модификатор на все
   выпадающие меню вне главной (меню режима «Разработки карты», версий,
   гамбургер карты, шаг линии времени в списках карт); меню главной (домик,
   ψ, «Работа», админ, показ карт) — без значков, решение владельца, там
   подпись остаётся центрированной. Пункт — .cex-dropdown-menu-btn:
   <svg class="cex-icon"> + <span>подпись</span>. */
/* Значок пункта — того же размера, что на кнопках футера (.cex-icon--lg,
   22px), а не мелкий базовый 18px: в меню он один носитель смысла рядом с
   подписью и должен узнаваться так же, как на самой кнопке. */
.cex-dropdown-menu--icons .cex-dropdown-menu-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.mkp-pick-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.mkp-pick-item > .cex-icon, .mkp-pick-noicon { flex-shrink: 0; width: 22px; height: 22px; }
.mkp-pick-item > .cex-icon { stroke-width: 1.7; }
.cex-dropdown-menu--icons .cex-dropdown-menu-btn > .cex-icon { flex-shrink: 0; width: 22px; height: 22px; stroke-width: 1.7; }
/* Пункты меню версий: значок и «Версия N» слева (в одном span, см.
   cexToggleMapDevVersionMenu, history.js), справа значок статуса — галочка у
   текущей (обычный размер), карандаш у редактируемой (--sm; место занято
   всегда). Выбранная версия (открытая сейчас в разделе) — тёмным
   (.hamburger-active), как везде в дропдаунах. */
#map-dev-version-menu .cex-dropdown-menu-btn { justify-content: space-between; }
#map-dev-version-menu .map-dev-ver-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#map-dev-version-menu .map-dev-ver-pencil { flex-shrink: 0; }
/* Смена версии в «Разработке карты» — аккуратная рамочка у номера версии в
   шапке (_cexMapDevRenderVersionChip, history.js): на карте — номер рядом с
   «Картой Совместности» (#btn-markup-extra), на списке фраз — номер в
   заголовке «Версия N». Номер в рамочке — Jost, как подписи кнопок. У #btn-markup-extra инлайновый надстрочный вид
   (top/line-height:0) — рамочке он мешает, снимаем (!important); вне режима
   номер прежний. Тёмная (тон .cex-btn-mid) — выбрана редактируемая версия
   (--edit); открытое меню красит её тёмным поверх (.hamburger-active). */
.map-dev-ver-chip {
  display: inline-block; align-self: center;
  font-family: 'Jost', sans-serif !important; font-size: var(--fs-meta) !important; font-weight: 400 !important;
  letter-spacing: 0.02em; color: #5A5049 !important;
  padding: 1px 6px; border: 1px solid #CEC4B8; border-radius: 6px; background: transparent;
  cursor: default !important; user-select: none; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
#btn-markup-extra.map-dev-ver-chip {
  position: static !important; top: auto !important; line-height: 1.25 !important;
  opacity: 1 !important; margin-left: 4px;
}
.map-dev-ver-chip--title { font-size: 0.8em !important; line-height: 1.15; padding: 0 6px; margin-left: 2px; }
.map-dev-ver-chip:hover { border-color: #9A8E84; background: rgba(206, 196, 184, 0.25); }
.map-dev-ver-chip--edit { background: #5A5049 !important; color: #F0EBE1 !important; border-color: #5A5049 !important; }
.map-dev-ver-chip.hamburger-active { background: #28231E !important; color: #F0EBE1 !important; border-color: #28231E !important; }
#btn-map-dev-version.cex-icon-btn #map-dev-version-label { font-weight: 500; font-size: var(--fs-small); }

/* Карта раздела «Иллюстрации» (examples.js, body.cex-examples-map): карточки
   кликабельны целиком (клик закрепляет всплывающий список, карту не
   приближает), на карточках с иллюстрациями — бейдж с их числом. Пункт
   всплывающего списка — превью и название. */
body.cex-examples-map .map-container .card { cursor: default; }
.cex-ex-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 15px;
  background: #5A5049;
  color: #F0EBE1;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.cex-examples-panel-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid #E8E0D4;
  border-radius: 9px;
  background: #FDF8EF;
  cursor: default;
  text-align: left;
  font-family: 'Jost', sans-serif;
}
.cex-examples-panel-item:hover { border-color: #9A8E84; }
.cex-examples-panel-thumb { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #EDE6DA; }

/* «Показываемый текст» параметра автообзора (admin-review-param-edit.html):
   тот же редактор, но поле невысокое — там фраза-другая, а не страница. */
#review-param-display-text.cex-rte-editor { min-height: 90px; }
#review-param-display-text.cex-rte-editor[contenteditable="false"] { background: #F0EBE1; }

/* Форматированный текст обзора в строке «Обзор:» (_cexRenderReviewBarFit,
   map.js): типографика редактора, но кегль и интерлиньяж — строки обзора. */
/* Строка «Обзор:» в футере карты (_cexRenderReviewBarFit, map.js) — кнопка:
   клик открывает обзор на весь экран. Всегда две строки текста (line-clamp),
   при любом состоянии поля заметок; метка «Обзор:» всегда зелёная. */
/* Строка «Обзор:» (_cexRenderReviewBarFit, map.js): бокс текста, внутри него
   справа плавает превью карты высотой ровно в три строки (4.5em = 3 × 1.5
   line-height) — первые три строки идут рядом с превью, остальные обтекают
   его и идут на всю ширину. Оба — одна кнопка (_cexReviewBarToggle). */
/* Бокс — карточка-кнопка: рамка и скругление (те, что раньше были у одного
   превью) обводят текст вместе с превью, чтобы оба читались одной нажимаемой
   плашкой; наведение темнит рамку и метку, нажатие — чуть темнит фон.
   max-height (_cexReviewBarSetLines) — три строки плюс поля и рамка (на
   сайте border-box, они входят в max-height). */
.cex-review-bar-box {
  cursor: default;
  border: 1.5px solid #CEC4B8; border-radius: 9px;
  padding: 5px 6px 5px 10px;
  transition: border-color .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
/* Наведение мышью — зелёная подсветка, как у карточки превью анонима на
   главной (#E3ECDD, #scr-intro.intro--anon .intro-map-preview:hover); рамка —
   зелёная сайта. На тач-экранах :hover не включаем — залипал бы после тапа. */
@media (hover: hover) {
  .cex-review-bar-box:hover { background-color: #E3ECDD; border-color: #8EA68C; }
}
.cex-review-bar-box:focus-visible { background-color: #E3ECDD; border-color: #8EA68C; }
.cex-review-bar-box:active { background: rgba(90, 80, 73, 0.07); }
/* Один мягкий зелёный отблеск строки обзора при открытии исторической карты —
   тот же цвет и ход, что у карточки превью анонима на главной
   (cex-anon-card-flash): одна итерация, без повторов. Задержку ставит
   _cexRenderReviewBarFit (map.js) — бокс пересоздаётся, отблеск не начинается
   заново. Фон бара — #F0EBE1, поэтому края анимации прозрачные. */
.cex-review-bar-box--flash { animation: cex-review-bar-flash 2.2s ease-in-out 0.4s 1 backwards; }
@keyframes cex-review-bar-flash {
  0%   { background-color: rgba(227, 236, 221, 0); }
  35%  { background-color: #E3ECDD; border-color: #8EA68C; }
  100% { background-color: rgba(227, 236, 221, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cex-review-bar-box--flash { animation: none; }
}
.cex-review-bar-thumb {
  float: right; width: 4.5em; height: 4.5em; margin: 0 0 0 10px; padding: 0; display: block;
  box-sizing: border-box; font: inherit;
  border: none; border-radius: 6px; background: #EDE6DA;
  overflow: hidden; cursor: default;
}
.cex-review-bar-thumb .cex-cmp-preview-img { width: 100%; height: 100%; border-radius: 0; }
/* Строка отзыва клиента в футере карты (#jm-feedback-row, followup.js) — карточка
   в стиле строки «Обзор:»: рамка, тёплая подложка, зелёная метка, текст отзыва
   обычным кеглем тёмным цветом. */
.cex-fb-card {
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); line-height: 1.45;
  color: #5A5049;
  background: #F7F2EA;
  border: 1.5px solid #CEC4B8; border-left: 4px solid #8EA68C; border-radius: 9px;
  padding: 7px 10px;
  box-sizing: border-box;
}
.cex-fb-label { font-weight: 500; color: #6F8A6D; }
.cex-fb-meta { font-size: var(--fs-meta); color: var(--c-muted-text); }
.cex-fb-text { color: #28231E; margin-top: 1px; overflow-wrap: anywhere; }
.cex-review-bar-label { font-weight: 500; color: #8EA68C; }
.cex-review-bar-box:hover .cex-review-bar-label { color: #6F8A6D; }
/* Свёрнутый текст обзора: ограничение по высоте в строках (max-height ставит
   _cexReviewBarSetLines, map.js; умолчание — три строки), а не line-clamp:
   с -webkit-box плавающее превью внутри не обтекается. Текст короче — бокс
   ниже сам. */
.cex-review-bar-clamp {
  max-height: 4.5em;
  overflow: hidden;
  word-break: break-word;
}
/* Обзор на весь экран (#jm-review-full, index.html; cexOpenReviewFull, map.js):
   превью карты в левом верхнем углу обтекается текстом. */
.jm-review-full-inner { max-width: 760px; margin: 0 auto; padding: 18px 22px 28px; box-sizing: border-box; }
.jm-review-full-thumb {
  float: left; width: 128px; height: 128px; margin: 0 18px 12px 0; padding: 0;
  border: 1.5px solid #CEC4B8; border-radius: 12px; background: #EDE6DA; overflow: hidden;
  cursor: default; display: block;
}
.jm-review-full-thumb:hover { border-color: #9A8E84; }
.jm-review-full-thumb .cex-cmp-preview-img { width: 100%; height: 100%; border-radius: 0; }
.jm-review-full-text { color: #5C5047; }
.jm-review-full-text h3:first-child { margin-top: 0; }
.jm-review-full-text > p:first-child { color: #28231E; font-size: var(--fs-body); }
.jm-review-full-text > :nth-child(n+2) { clear: both; }
.jm-review-full-text::after { content: ''; display: block; clear: both; }
.jm-review-full-help { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #EDE6DA; }
.jm-review-full-help .cex-btn { max-width: 100%; white-space: normal; }
@media (max-width: 480px) {
  .jm-review-full-inner { padding: 14px 16px 24px; }
  .jm-review-full-thumb { width: 96px; height: 96px; margin: 0 14px 8px 0; }
}
.cex-review-rich.cex-rte-content { font-size: inherit; line-height: inherit; color: inherit; }
.cex-review-rich.cex-rte-content p,
.cex-review-rich.cex-rte-content ul,
.cex-review-rich.cex-rte-content ol { margin: 0 0 4px; }
.cex-review-rich.cex-rte-content p:last-child { margin-bottom: 0; }

/* ── «Доска для рисования» (Задачи → футер, whiteboard.js) ─────────────────
   Холст — DOM: #wb-canvas 12000×9000 условных единиц с transform: scale()
   внутри прокручиваемого .wb-viewport; размер обёртки .wb-scale ставит JS
   под масштаб (иначе прокрутке не по чему считать протяжённость). Слои
   (группы, блоки) кликов не ловят — их ловят сами элементы и пустой холст;
   стрелки — SVG МЕЖДУ группами и блоками: под блоком стрелка не видна, зато
   её широкая невидимая линия попадания (единственная цель клика в SVG) не
   перекрывает ручку размера и край блока.
   touch-action: none — все касания идут pointer-событиям (панорама, перенос,
   щипок масштаба считаются в JS, нативной прокрутки у холста нет). */
.wb-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.wb-viewport {
  flex: 1; min-height: 0; overflow: auto; position: relative;
  background: #F7F2EA; touch-action: none; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; cursor: grab;
}
/* Рамка выделения — курсор-перекрестие; взятый удержанием элемент (блок,
   группа, карточка, чип задачи) и протяжка холста — «кулачок» (grabbing)
   на весь холст, пока не отпустили (whiteboard.js, _cexWbSelCursor). */
.wb-viewport.is-selecting, .wb-viewport.is-selecting * { cursor: crosshair !important; }
.wb-viewport.is-grabbing, .wb-viewport.is-grabbing * { cursor: grabbing !important; }
/* Стрелка над ручкой размера выбранного — тем же способом, классом на всём
   холсте: курсор самой ручки (.wb-grip, она внутри масштабированного холста)
   у владельца не появлялся ни в одном положении, а «кулачок» классом виден.
   Где ручка, считает whiteboard.js по её месту на экране с запасом
   (_cexWbGripAt); класс держится и пока ею тянут. */
.wb-viewport.is-grip-hover, .wb-viewport.is-grip-hover * { cursor: default !important; }
.wb-scale { position: relative; }
.wb-canvas {
  position: absolute; left: 0; top: 0; width: 12000px; height: 9000px;
  transform-origin: 0 0;
  background-image: radial-gradient(#DDD5CB 1px, transparent 1.2px);
  background-size: 24px 24px;
}
.wb-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; isolation: isolate; }
.wb-layer > * { pointer-events: auto; }
.wb-arrows { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wb-arrow { fill: none; stroke: #8A7F75; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wb-arrow-g.is-selected .wb-arrow { stroke: #28231E; stroke-width: 3; }
.wb-arrow-hit { fill: none; stroke: transparent; stroke-width: 14; stroke-linecap: round; pointer-events: stroke; cursor: default; }

/* Группа: пунктирная рамка, полупрозрачная подложка, название — плашкой
   поверх верхнего края (input: без фокуса тянет группу, с фокусом правит). */
.wb-group {
  position: absolute; box-sizing: border-box;
  border: 1.5px dashed #BEB4A8; border-radius: 14px;
  background: rgba(252, 250, 246, 0.55); cursor: grab;
}
.wb-group.is-selected { border-color: #5A5049; border-style: solid; box-shadow: 0 0 0 2px rgba(90, 80, 73, 0.16); }
.wb-group-title {
  position: absolute; left: 12px; top: -15px; height: 30px; box-sizing: border-box;
  width: 140px; min-width: 48px; max-width: calc(100% - 24px); padding: 0 10px;
  border: 1.5px solid #CEC4B8; border-radius: 8px; background: #FCFAF6;
  /* 16px (--fs-input): мельче iOS увеличивает страницу при фокусе — на холсте
     это особенно неуместно. */
  font-family: 'Jost', sans-serif; font-size: var(--fs-input); font-weight: 500; color: #28231E;
  outline: none; cursor: grab;
}
.wb-group-title:focus { cursor: text; border-color: #8EA68C; }
.wb-group-title::placeholder { color: #BEB4A8; font-weight: 400; }

/* Блок: карточка с полем текста и чипами задач под ним. Протяжка по блоку
   двигает холст, удерживание — сам блок; тап по полю — правка. */
.wb-block {
  position: absolute; box-sizing: border-box; display: flex; flex-direction: column;
  border: 1.5px solid #CEC4B8; border-radius: 12px; background: #FCFAF6;
  box-shadow: 0 1px 2px rgba(40, 35, 30, 0.06); cursor: grab; overflow: visible;
}
.wb-block.is-selected { border-color: #5A5049; box-shadow: 0 0 0 2px rgba(90, 80, 73, 0.18); }
.wb-block.is-drop { border-color: #8EA68C; box-shadow: 0 0 0 3px rgba(142, 166, 140, 0.35); }
.wb-block.is-dragging, .wb-group.is-dragging { z-index: 1000; opacity: 0.92; cursor: grabbing; }
/* Поле текста — contenteditable (whiteboard.js, «Текст блока со ссылками»):
   переносы — <br>, ссылки — <a> с названием тем же цветом и подчёркиванием,
   что в подробностях задачи (.cex-rte-content a). Пустое — подсказка
   data-placeholder (.is-empty). Полоса прокрутки скрыта: колесо над холстом —
   масштаб, протяжка — панорама; к курсору поле докручивает само. */
.wb-block-text {
  flex: 1 1 auto; min-height: 36px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: none; border-radius: 12px 12px 0 0; background: transparent; outline: none;
  font-family: 'Jost', sans-serif; font-size: var(--fs-input); line-height: 1.4; color: #28231E;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  cursor: grab; overflow: auto; scrollbar-width: none; -webkit-user-select: text; user-select: text;
}
.wb-block-text::-webkit-scrollbar { display: none; }
.wb-block-text:focus { cursor: text; }
/* Без фокуса — без системного меню долгого нажатия: удержание пальцем на доске
   выбирает элемент (см. _cexWbNoNativeText). */
.wb-block-text:not(:focus), .wb-group-title:not(:focus) { -webkit-touch-callout: none; }
.wb-block-text.is-empty::before { content: attr(data-placeholder); color: #BEB4A8; pointer-events: none; }
.wb-block-text.is-empty:focus::before { content: ''; }
.wb-block-text a { color: #6C8C68; text-decoration: underline; cursor: default; }
.wb-block-text:focus a { cursor: text; }
/* Начертание из панели форматирования (whiteboard.js, «Начертание текста
   блока»): жирный — полужирный шрифта сайта; подчёркнутое и зачёркнутое
   вместе — обе линии. */
.wb-block-text b { font-weight: 600; }
.wb-block-text u s, .wb-block-text s u { text-decoration: underline line-through; }
/* Панель форматирования над блоком, текст которого правят (_cexWbFmtShow):
   вид — компактная панель редактора сайта, место ставит JS (над блоком,
   иначе под ним). Видна только с классом .is-on. */
.wb-fmt-bar {
  position: absolute; left: 0; top: 0; z-index: 30; display: none; flex-wrap: nowrap;
  background: #FCFAF6; box-shadow: 0 4px 14px rgba(40, 35, 30, 0.16);
}
.wb-fmt-bar.is-on { display: flex; }
.wb-block-tasks { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; }
.wb-block-tasks:empty { display: none; }
/* Карточка задачи прямо на доске (вид 'task', whiteboard.js): рамка —
   у самого чипа, у элемента своей рамки и фона нет; чип во всю карточку. */
/* Карточка задачи нажимается (тап — открыть задачу) — стрелка, как над чипом;
   пустая заглушка без задачи — ладонь, открывать нечего. */
.wb-block.wb-taskcard { border: none; background: transparent; box-shadow: none; border-radius: 10px; justify-content: center; cursor: default; }
.wb-taskcard .wb-block-tasks { padding: 0; }
.wb-taskcard .wb-chip { padding: 8px 6px 8px 12px; border-radius: 10px; font-size: var(--fs-small); cursor: default; box-shadow: 0 1px 2px rgba(40, 35, 30, 0.06); }
.wb-block.wb-taskcard.is-selected { box-shadow: none; }
/* Карточка без задачи (задачу убрали или удалили) — пунктирная заглушка, а
   не невидимка с одними точками; через несколько секунд уходит сама
   (whiteboard.js, «Пустые карточки задач»). */
.wb-block.wb-taskcard.is-orphan { border: 1.5px dashed #CEC4B8; background: rgba(252, 250, 246, 0.7); cursor: grab; }
.wb-block.wb-taskcard.is-orphan.is-selected { border-color: #5A5049; }
.wb-orphan-note { padding: 0 12px; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #9A8E84; font-style: italic; }
.wb-block.wb-taskcard.is-selected .wb-chip { border-color: #5A5049; box-shadow: 0 0 0 2px rgba(90, 80, 73, 0.18); }
/* Чип задачи: клик — открыть (курсор — стрелка, как у ссылки), удержание и
   протяжка — в другой блок (призрак под курсором, «кулачок»). */
.wb-chip {
  display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px;
  border: 1.5px solid #DDD5CB; border-radius: 8px; background: #fff;
  font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.3; color: #28231E;
  cursor: default; user-select: none; -webkit-user-select: none;
}
.wb-chip.is-done .wb-chip-title { text-decoration: line-through; color: #8A7F75; }
.wb-chip.is-lifted { opacity: 0.35; }
.wb-chip-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-chip-x, .wb-chip-more { flex-shrink: 0; border: none; background: none; padding: 2px; line-height: 0; color: #9A8E84; cursor: default; }
.wb-chip-x:hover { color: #B5524A; }
.wb-chip-more:hover, .wb-chip.is-open .wb-chip-more { color: #28231E; }
.wb-chip.is-open .wb-chip-more .cex-icon { transform: none !important; }
/* Подробности задачи поверх доски — под чипом, в слое над блоками. */
.wb-popover {
  position: absolute; box-sizing: border-box; max-height: 320px; overflow: hidden;
  padding: 12px 14px; border: 1.5px solid #CEC4B8; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 20px rgba(40, 35, 30, 0.16); font-family: 'Jost', sans-serif; color: #28231E; cursor: default;
}
.wb-pop-title { font-size: var(--fs-body); font-weight: 500; line-height: 1.35; margin-bottom: 6px; }
.wb-pop-title.is-done { text-decoration: line-through; color: #8A7F75; }
.wb-pop-sec { font-size: var(--fs-meta); color: #6A5F56; line-height: 1.45; margin-bottom: 6px; white-space: pre-wrap; }
.wb-pop-sec.cex-rte-content { white-space: normal; }
.wb-pop-crit { white-space: normal; }
.wb-pop-subs { margin-top: 8px; font-size: var(--fs-meta); }
.wb-pop-subs .cex-task-subs { margin-bottom: 0; }
.wb-pop-label { color: #8A7F75; }
.wb-pop-meta { font-size: var(--fs-meta); color: #8A7F75; line-height: 1.45; }
/* Точки на сторонах — из них тянут стрелки. Видны у выбранного, при
   наведении и у всех, пока стрелку тянут (.is-linking). */
.wb-dot {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; border: 1.5px solid #8EA68C; box-sizing: border-box; cursor: default;
  opacity: 0; transition: opacity 0.12s, transform 0.12s; touch-action: none;
}
.wb-dot::before { content: ''; position: absolute; left: -8px; top: -8px; right: -8px; bottom: -8px; }
.wb-dot--t { left: 50%; top: 0; }
.wb-dot--b { left: 50%; top: 100%; }
.wb-dot--l { left: 0; top: 50%; }
.wb-dot--r { left: 100%; top: 50%; }
.wb-block:hover > .wb-dot, .wb-group:hover > .wb-dot, .is-selected > .wb-dot, .wb-canvas.is-linking .wb-dot { opacity: 1; }
.wb-dot:hover, .wb-dot.is-link-target { background: #8EA68C; transform: scale(1.35); }
.wb-block.is-link-target, .wb-group.is-link-target { border-color: #8EA68C; box-shadow: 0 0 0 2px rgba(142, 166, 140, 0.4); }
.wb-marquee { position: absolute; box-sizing: border-box; border: 1.5px dashed #5A5049; background: rgba(142, 166, 140, 0.12); border-radius: 4px; pointer-events: none; }
/* Несколько выбрано — ручки размера, палитра и точки только у одиночного. */
.wb-canvas.is-multi .wb-grip, .wb-canvas.is-multi .wb-palette { display: none !important; }
.wb-canvas.is-multi .is-selected > .wb-dot { opacity: 0; }
.wb-canvas.is-multi .wb-block:hover > .wb-dot, .wb-canvas.is-multi .wb-group:hover > .wb-dot { opacity: 1; }
.wb-arrow-temp { stroke: #28231E; stroke-width: 2; stroke-dasharray: 6 4; }
/* Ручки концов выбранной стрелки — перецепить к другой точке. */
.wb-arrow-handle {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #28231E; border: 2px solid #F7F2EA; box-sizing: border-box; cursor: default; touch-action: none;
}
.wb-arrow-handle::before { content: ''; position: absolute; left: -8px; top: -8px; right: -8px; bottom: -8px; }
.wb-chip-ghost { position: fixed; z-index: 100000; pointer-events: none; opacity: 0.9; box-shadow: 0 4px 12px rgba(40, 35, 30, 0.2); cursor: grabbing; }
.wb-chip-ghost .wb-chip-x { visibility: hidden; }
/* Ручка размера — только у выбранного; курсор над ней — классическая стрелка
   (решение владельца), не двусторонняя стрелка ресайза. Ставит её класс на
   холсте (.wb-viewport.is-grip-hover, выше), а не только cursor ручки. */
.wb-grip {
  position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px;
  border-radius: 4px; background: #5A5049; border: 2px solid #F7F2EA; box-sizing: border-box;
  cursor: default; display: none; touch-action: none;
}
.is-selected > .wb-grip { display: block; }
/* Палитра — под выбранным блоком (над ним её срезал бы край холста у y≈0). */
.wb-palette {
  position: absolute; left: 0; top: 100%; margin-top: 6px; display: none; gap: 6px;
  padding: 5px 7px; border-radius: 9px; background: #fff; border: 1.5px solid #CEC4B8;
  box-shadow: 0 2px 6px rgba(40, 35, 30, 0.1);
}
.wb-block.is-selected > .wb-palette, .wb-group.is-selected > .wb-palette { display: flex; }
.wb-swatch { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid #CEC4B8; cursor: default; box-sizing: border-box; }
.wb-swatch.is-on { border-color: #28231E; box-shadow: inset 0 0 0 2px #fff; }

/* Поверх холста: «Загрузка…»/пустая доска, подсказка режима стрелки, масштаб. */
.wb-overlay-note {
  position: absolute; left: 16px; right: 16px; top: 40%; text-align: center; pointer-events: none;
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: var(--c-muted-text); line-height: 1.5;
}
/* Только просмотр (whiteboard.js, _cexWbApplyAccess): вошедший не ответственен
   ни за одну задачу этой группы — правка скрыта, остаются панорама, масштаб и
   открытие задачи по чипу. */
.wb-ro-note {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  max-width: calc(100% - 150px); box-sizing: border-box; padding: 6px 12px; border-radius: 14px;
  background: rgba(252, 250, 246, 0.95); border: 1.5px solid #CEC4B8; pointer-events: none;
  font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.35; color: #5A5049; text-align: left;
}
/* Плашка «Доска откачена … · Вернуть как было» — на месте «Только просмотр»
   (владелец просмотром не бывает), кнопка внутри кликабельна. */
.wb-undo-note { pointer-events: auto; bottom: 56px; }
.wb-undo-note button {
  border: 0; background: none; padding: 0; cursor: default;
  font: inherit; color: #28231E; text-decoration: underline; text-underline-offset: 2px;
}
/* Меню отката над кнопкой с часами. */
.wb-restore-menu { position: fixed; z-index: 99995; }
.wb-restore-menu .wb-restore-menu-undo { border-top: 1px solid #E6DCCE; border-radius: 0 0 5px 5px; margin-top: 2px; }
/* Откат запрещён (на доске есть коллеги или нет связи) — причина сверху,
   пункты бледные (клик всё равно лишь повторит причину тостом). */
.wb-restore-menu .wb-restore-menu-note { max-width: 240px; padding: 6px 10px 8px; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #9A5A00; line-height: 1.35; border-bottom: 1px solid #E6DCCE; margin-bottom: 2px; }
.wb-restore-menu .cex-filter-menu-item.is-disabled { color: #B5ABA2; cursor: not-allowed; }
#wb-restore.is-open { border-color: #9A8E84; }
#scr-admin-whiteboard.wb-readonly .wb-edit-only,
#scr-admin-whiteboard.wb-readonly .wb-hist,
#scr-admin-whiteboard.wb-readonly .wb-dot,
#scr-admin-whiteboard.wb-readonly .wb-grip,
#scr-admin-whiteboard.wb-readonly .wb-palette,
#scr-admin-whiteboard.wb-readonly .wb-chip-x { display: none !important; }
#scr-admin-whiteboard.wb-readonly .wb-block-text,
#scr-admin-whiteboard.wb-readonly .wb-group-title { cursor: default; }
.wb-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; gap: 4px; }
.wb-zoom-btn {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; box-sizing: border-box;
  border: 1.5px solid #CEC4B8; background: rgba(252, 250, 246, 0.94); color: #5A5049;
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); line-height: 1; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.wb-zoom-btn:hover { border-color: #9A8E84; color: #28231E; }
.wb-zoom-val { font-size: var(--fs-meta); }
/* Отмена/повтор, откат и буфер обмена (вырезать, копировать, вставить) —
   слева внизу, в пару к масштабу справа. На узком экране не налезают на
   масштаб: лишнее уходит рядом ВЫШЕ (wrap-reverse — отмена/повтор остаются
   внизу). Перед буфером — отступ, как разделитель групп. */
.wb-hist { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap-reverse; gap: 4px; max-width: calc(100% - 170px); }
.wb-hist .wb-zoom-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 34px; }
.wb-hist .cex-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.wb-hist .wb-zoom-btn:disabled { opacity: 0.4; cursor: default; border-color: #CEC4B8; color: #5A5049; }
.wb-hist #wb-cut { margin-left: 6px; }
/* На узком экране кнопки внизу слева встают в два ряда — плашка «Доска
   откачена…» поднимается над ними. */
@media (max-width: 480px) { .wb-undo-note { bottom: 96px; } }

/* Сверху слева на холсте: стрелка «← Доска · …» — обратно на доску, откуда
   пришли по ссылке на область, и плашка выбора области для новой ссылки. */
.wb-top {
  position: absolute; left: 12px; top: 12px; right: 12px; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.wb-top > * { pointer-events: auto; }
.wb-back {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 34px; box-sizing: border-box;
  padding: 0 12px 0 6px; border-radius: 9px; border: 1.5px solid #9A8E84; background: rgba(252, 250, 246, 0.96);
  font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #28231E; cursor: default;
  box-shadow: 0 2px 6px rgba(40, 35, 30, 0.1); -webkit-tap-highlight-color: transparent;
}
.wb-back:hover { border-color: #5A5049; }
.wb-back .cex-icon { width: 18px; height: 18px; flex-shrink: 0; }
.wb-back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-pick-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: min(620px, 100%); box-sizing: border-box;
  padding: 8px 10px 8px 14px; border-radius: 12px; border: 1.5px solid #8EA68C; background: rgba(252, 250, 246, 0.97);
  box-shadow: 0 4px 14px rgba(40, 35, 30, 0.14); font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.35; color: #28231E;
}
.wb-pick-bar-text { flex: 1 1 220px; min-width: 0; }
.wb-pick-bar-btns { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.wb-pick-bar-btns .cex-btn { min-height: 0; height: 34px; padding: 0 14px; font-size: var(--fs-meta); }
/* Область, показанная по ссылке: рамка на мгновение, потом гаснет. */
.wb-area-flash {
  position: absolute; box-sizing: border-box; pointer-events: none; z-index: 30;
  border: 3px solid #8EA68C; border-radius: 10px; background: rgba(142, 166, 140, 0.10);
  box-shadow: 0 0 0 4px rgba(142, 166, 140, 0.25); transition: opacity 0.8s ease;
}
.wb-area-flash.is-out { opacity: 0; }

/* Окно выбора задачи (wb-task-modal, index.html). */
.wb-pick-list { overflow-y: auto; flex: 1 1 auto; min-height: 60px; display: flex; flex-direction: column; gap: 6px; }
.wb-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; box-sizing: border-box;
  padding: 8px 12px; border: 1.5px solid #DDD5CB; border-radius: 10px; background: #F8F4EE; text-align: left; cursor: default;
  font-family: 'Jost', sans-serif; color: #28231E;
}
.wb-pick:hover { border-color: #9A8E84; }
.wb-pick.is-done .wb-pick-title { color: #8A7F75; text-decoration: line-through; }
.wb-pick.is-here { opacity: 0.55; cursor: default; }
.wb-pick-title { font-size: var(--fs-body); line-height: 1.35; }
.wb-pick-meta { font-size: var(--fs-meta); color: var(--c-muted-text); }
/* «Новая задача» в окне выбора — квадрат высотой с поле поиска, справа от него. */
.wb-task-new-btn { flex: 0 0 auto; width: var(--cex-filter-h); min-height: 0; height: auto; padding: 0; }
.wb-pick-empty { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); text-align: center; padding: 20px 0; }

/* Доска для рисования: коллеги — курсоры, стрелки к ним у края, кто онлайн. */
.wb-hdr-right { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: 12px; }
.wb-hdr-right .cex-hdr-title { position: static; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: none; }
.wb-online { display: flex; align-items: center; flex-shrink: 0; }
.wb-online-av {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -6px; border: 2px solid #F0EBE1; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0;
}
.wb-online-av:first-child { margin-left: 0; }
.wb-online-more { background: #9A8E84; }
.wb-peer { position: absolute; transform-origin: 0 0; pointer-events: none; z-index: 20; transition: left 0.08s linear, top 0.08s linear; }
.wb-peer-arrow { display: block; filter: drop-shadow(0 1px 1px rgba(40, 35, 30, 0.3)); }
.wb-peer-name {
  position: absolute; left: 14px; top: 16px; white-space: nowrap; padding: 1px 7px; border-radius: 8px;
  font-family: 'Jost', sans-serif; font-size: 12px; color: #fff; line-height: 1.5;
}
.wb-edges { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.wb-edge { position: absolute; width: 0; height: 0; }
.wb-edge-arrow {
  position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--wb-peer); box-shadow: 0 1px 4px rgba(40, 35, 30, 0.3);
}
.wb-edge-arrow::after {
  content: ''; position: absolute; right: -9px; top: 50%; margin-top: -6px;
  border-left: 10px solid var(--wb-peer); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.wb-edge-init {
  position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; line-height: 32px; text-align: center;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; color: #fff;
}

/* «Продолжить заполнение карты» под рядом кнопок главной (#intro-resume,
   _cexRenderIntroResume в session.js): ссылка на отложенную соло-карту +
   крестик «удалить в корзину». Ширина и потолок — как у рамки превью и ряда
   кнопок (400px), зелёная обводка — продолжение, а не новое действие. */
.intro-resume { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 400px; margin-top: 12px; }
.intro-resume-item { display: flex; align-items: stretch; background: #F7F2EA; border: 1.5px solid #8EA68C; border-radius: 10px; overflow: hidden; }
.intro-resume-link { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 12px; background: none; border: none; cursor: default; text-align: left;
  font-family: 'Jost', sans-serif; color: #28231E; -webkit-tap-highlight-color: transparent; }
.intro-resume-title { font-size: var(--fs-ui); font-weight: 500; line-height: 1.3; }
/* Шеврон идёт за последним словом, а не отдельным столбцом справа */
.intro-resume-title .cex-icon { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }
.intro-resume-meta { font-size: var(--fs-meta); color: #5A5049; line-height: 1.4; }
.intro-resume-x { flex: none; width: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-left: 1px solid #CEC4B8; cursor: default; color: #9A8E84; padding: 0; }
.intro-resume-x .cex-icon { width: 16px; height: 16px; }
@media (hover: hover) {
  .intro-resume-link:hover .intro-resume-title { text-decoration: underline; text-underline-offset: 3px; }
  .intro-resume-x:hover { color: #28231E; }
}

/* Ссылки под превью карты, только у анонима, друг под другом, одного вида:
   «С психологом · 1,5 часа» (модал записи), под ней «Узнать, что это» (тур). */
.intro-anon-links { display: none; }
#scr-intro.intro--anon .intro-anon-links {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px auto 0;
}
/* «Уже есть аккаунт? Войти» под главной — тихая текстовая ссылка, без рамки
   кнопки: не спорит с карточкой «Создать…»; подчёркнуто только «Войти». */
.intro-login-link { background: none; border: none; cursor: default; margin: 0; padding: 4px 8px;
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #5A5049; }
.intro-login-link u { text-decoration: underline; text-underline-offset: 3px; }
.intro-tour-link { background: none; border: none; cursor: default; margin: 0; padding: 4px 8px; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #5A5049; text-decoration: underline; text-underline-offset: 3px; }

/* Строка обзора сравнения в футере «Карт целиком» (#compare-maps-review-bar,
   _cexRenderCmpReviewBar в history.js) — НАД кнопками, тем же боксом, что
   строка «Обзор:» в футере карты (.cex-review-bar-box выше): рамка-кнопка,
   зелёная метка, текст; справа внутри бокса плавают превью — здесь два
   (обе карты сравнения, с рамками общих тактов), в ряд, того же размера,
   что превью карты в строке «Обзор:» (сторону ставит JS по line-height, как
   там). Кегль и цвет — как у #jm-auto-review-bar (index.html). */
.cex-cmp-review-bar {
  font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5C5047;
  line-height: 1.5; padding: 0 2px 8px;
}
.cex-cmp-review-thumbs {
  float: right; display: flex; gap: 5px; margin: 0 0 0 10px;
}
.cex-cmp-review-thumbs .cex-review-bar-thumb { float: none; margin: 0; }
/* Обзор сравнения на весь экран (#compare-maps-review, compare-maps.html):
   два превью карт в левом верхнем углу одним плавающим блоком, текст их
   обтекает — как превью карты в обзоре карты (.jm-review-full-thumb). */
.cex-cmp-review-full-thumbs { float: left; display: flex; gap: 12px; margin: 0 18px 12px 0; cursor: default; }
.cex-cmp-review-full-thumbs .jm-review-full-thumb { float: none; margin: 0; width: 144px; height: 144px; }
/* Над каждым превью — дата карты и имя (псевдоним), если указано. */
.cex-cmp-review-full-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 144px; }
.cex-cmp-review-full-cap { display: flex; flex-direction: column; align-items: center; width: 100%; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.3; text-align: center; }
.cex-cmp-review-full-date { color: #5C5047; }
.cex-cmp-review-full-name { color: #9A8E84; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Узкий экран: превью не обтекаются — встают строкой на всю ширину (каждое —
   половина, квадратом), текст обзора идёт под ними. */
@media (max-width: 600px) {
  .cex-cmp-review-full-thumbs { float: none; gap: 10px; margin: 0 0 16px; width: 100%; }
  .cex-cmp-review-full-col { flex: 1 1 0; width: auto; min-width: 0; }
  .cex-cmp-review-full-thumbs .jm-review-full-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* Обзор сравнения: «было › стало» у сдвинувшихся тактов — два квадрата цветами
   карты (легенда «Тура по карте», _CEX_TACT_LEGEND) и уголок между ними,
   справа от названия такта. Ключи — _cexTactCmpColorKey: support — белый,
   1 — зелёный, 2 — оранжевый, 4 — красный, 3 — серый. */
.cex-cmp-shifts { list-style: none; padding-left: 0; }
.cex-cmp-shifts > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cex-cmp-shift-name { min-width: 0; }
.cex-cmp-shift-sw { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cex-cmp-sw { flex: none; width: 18px; height: 18px; border-radius: 5px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .18); }
.cex-cmp-sw--support { background: #FFFFFF; border-color: #BFAF98; }
.cex-cmp-sw--1 { background: #B3EFBD; }
.cex-cmp-sw--2 { background: #FFD3A8; }
.cex-cmp-sw--4 { background: #FFAFA3; }
.cex-cmp-sw--3 { background: #E6E6E6; }
.cex-cmp-chev { width: 7px; height: 7px; border-top: 2px solid #9A8E84; border-right: 2px solid #9A8E84; transform: rotate(45deg); margin: 0 3px 0 0; }
/* «Взаимная поддержка»: два столбика квадратов — левая и правая карта
   сравнения; над ними подписи, чья это карта (имя, дата или «1-я/2-я
   карта», _cexCmpReviewBuild), под подписями — группы «Опор больше — …». */
.cex-cmp-support-cols { display: inline-flex; flex: none; }
.cex-cmp-support-cell { width: 76px; display: flex; justify-content: center; }
.cex-cmp-support-cap {
  width: 76px; font-size: var(--fs-meta); color: #9A8E84; line-height: 1.25; text-align: center;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cex-cmp-shifts > li.cex-cmp-support-head { align-items: flex-end; margin-bottom: 2px; }
.cex-cmp-shifts > li.cex-cmp-support-group { display: block; margin: 10px 0 4px; color: #28231E; font-weight: 500; }
/* «Что можно обсудить вместе»: название такта с оранжевым квадратом, под
   ним — его фразы (трудные переживания, качества других, опоры). */
.cex-cmp-shifts > li.cex-cmp-discuss-head { font-weight: 500; color: #28231E; }
.cex-cmp-shifts > li.cex-cmp-discuss-head:not(:first-child) { margin-top: 12px; }
.cex-cmp-shifts > li.cex-cmp-discuss-body { display: block; margin: 4px 0 0; }
.cex-cmp-discuss-body > p { margin: 2px 0 0; }
@media (max-width: 480px) {
  .cex-cmp-support-cell, .cex-cmp-support-cap { width: 60px; }
}
/* Квадрат цвета в обзоре сравнения: наведение/клик — пояснение цвета, как «i»
   на карте (_cexCmpReviewArmSwatches); название такта — ссылка «показать на картах». */
.cex-cmp-sw.has-tip { cursor: help; transition: transform 0.12s, box-shadow 0.12s; }
.cex-cmp-sw.has-tip:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(45, 107, 55, 0.35); }
.cex-cmp-sw.has-tip:focus-visible { outline: 2px solid #8EA68C; outline-offset: 2px; }
.cex-cmp-shift-name.is-link { cursor: default; text-decoration: underline dotted #9A8E84; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cex-cmp-shift-name.is-link:hover { color: #2D6B37; text-decoration-color: #2D6B37; }
.cex-cmp-shift-name.is-link:focus-visible { outline: 2px solid #8EA68C; outline-offset: 2px; border-radius: 3px; }
.cex-cmp-sw-tip { position: fixed; z-index: 99200; display: none; max-width: min(280px, calc(100vw - 16px)); padding: 9px 12px; border-radius: 8px; background: #28231E; color: #F7F2EA; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.4; box-shadow: 0 6px 18px rgba(14, 15, 14, .25); pointer-events: none; }
.cex-cmp-sw-tip-who { font-size: var(--fs-meta); color: #BEB4A8; margin-bottom: 3px; }
.cex-cmp-sw-tip-formula { font-size: var(--fs-meta); color: #BEB4A8; margin-bottom: 2px; }
.cex-cmp-sw-tip-lead { font-weight: 500; }
.cex-cmp-sw-tip-desc { color: #D9CFC2; margin-top: 2px; }

/* Подписи списков в мини-обзоре сравнения (_cexCmpSummaryFill, history.js):
   «Общие такты:» и т. п. — чуть плотнее и темнее текста. */
.cex-cmp-sum-h { font-weight: 500; color: #4A403A; }
/* Полоска над мини-обзором сравнения (#compare-maps-footer-handle): у самого
   верхнего края футера, как у футеров с полем заметок; свёрнутый футер —
   только кнопки. */
/* Футер — обычный .cex-footer, верхнее поле у него разное по ширине экрана
   (8–12px): пока полоска видна (.cex-cmp-footer--handle, history.js), поле
   снимаем, и полоска встаёт у самой рамки, как в остальных футерах. Ширина —
   на весь футер, включая боковые поля (в ряду свёрнутого футера — явной
   основой, иначе отрицательные поля сдвигали её центр влево). */
.cex-footer.cex-cmp-footer--handle { padding-top: 0; }
.cex-footer .cex-cmp-footer-handle { margin: 0 calc(-1 * var(--cex-footer-px)); }
/* Свёрнутый футер: мини-обзор в одну строку высотой с кнопку — в одном ряду
   с ними, между «Назад» и правыми кнопками (.reg-btn-group раскрыт через
   display:contents, порядок — order). Превью — квадраты на всю высоту. */
.cex-footer.cex-cmp-footer-collapsed { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.cex-cmp-footer-collapsed > .cex-cmp-footer-handle { flex: 0 0 calc(100% + 2 * var(--cex-footer-px)); order: 0; }
.cex-cmp-footer-collapsed > .reg-btn-group { display: contents; }
.cex-cmp-footer-collapsed > .reg-btn-group > :first-child { order: 1; margin-right: 0; }
.cex-cmp-footer-collapsed > .reg-btn-group > :not(:first-child) { order: 3; }
/* Отступ кластера от «выхода» (padding-left: 8px выше) нужен, когда кнопки
   рядом; в свёрнутом футере между ними мини-обзор, и зазор уже даёт
   column-gap — иначе справа от мини-обзора он вдвое больше, чем слева. */
.cex-footer.cex-cmp-footer-collapsed .reg-btn-group > .cex-btn-cluster { padding-left: 0 !important; margin-left: 0 !important; }
.cex-cmp-footer-collapsed > #compare-maps-review-bar {
  order: 2; flex: 1 1 0; min-width: 0; margin: 0; padding: 0;
  align-self: center; display: flex; align-items: center;
}
/* Переключение свёрнут/развёрнут — без переходов (иначе кнопки и рамка
   бокса доезжают анимацией, и футер моргает). */
.cex-cmp-footer-switching, .cex-cmp-footer-switching * { transition: none !important; animation: none !important; }
.cex-cmp-footer-collapsed #compare-maps-review-bar .cex-review-bar-box {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; box-sizing: border-box;
  height: var(--cex-btn-h); min-height: 0; max-height: none !important; padding: 3px 3px 3px 10px; overflow: hidden;
}
.cex-cmp-footer-collapsed #compare-maps-review-bar .cex-review-bar-label { flex: none; white-space: nowrap; }
.cex-cmp-footer-collapsed #compare-maps-review-bar .cex-review-bar-text {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cex-cmp-footer-collapsed #compare-maps-review-bar .cex-cmp-review-thumbs {
  float: none; order: 3; flex: none; height: auto; margin: 0 !important; gap: 3px;
}
.cex-cmp-footer-collapsed #compare-maps-review-bar .cex-review-bar-thumb {
  /* высота кнопки минус поля (3+3) и рамка бокса (1.5+1.5) */
  width: calc(var(--cex-btn-h) - 9px) !important; height: calc(var(--cex-btn-h) - 9px) !important;
  overflow: hidden;
}

/* Свёрнутый футер с полем заметки (_setCollapsed, session.js): полоску
   потянули вниз дальше одной строки поля — прячутся мини-обзор карты,
   строки под картой (сведения о карте, следующая карта, отзыв, отклик,
   «Вы психолог?») и подсказки психолога; поле в одну строку и кнопки
   остаются. */
.cex-bar-collapsed #jm-auto-review-bar,
.cex-bar-collapsed #jm-history-info,
.cex-bar-collapsed #jm-next-map-row,
.cex-bar-collapsed #jm-feedback-row,
.cex-bar-collapsed #jm-psych-response-row,
.cex-bar-collapsed #jm-psych-ask-row,
.cex-bar-collapsed .cex-student-hint-row,
.cex-bar-collapsed .cex-tip-psych,
.cex-bar-collapsed .cex-tip-online { display: none !important; }
.cex-bar-switching, .cex-bar-switching * { transition: none !important; animation: none !important; }
/* Скрытая область футера — полоска двумя тонкими чертами (значок «потяни
   вверх») вместо одной: футер свёрнут (.cex-bar-collapsed, session.js) или
   мини-обзор сравнения в ряду с кнопками (.cex-cmp-footer-collapsed). Вторая
   черта — тенью на 5px ниже: внутри нижнего поля полоски (6px), раскладку не
   двигает и на то, что под полоской, не наезжает. */
.cex-bar-collapsed .cex-comment-bar-handle::after,
.cex-bar-collapsed #jm-pdf-bar-handle::after,
.cex-cmp-footer-collapsed .cex-comment-bar-handle::after {
  --cex-h-c: #CEC4B8;
  height: 2px;
  margin-bottom: 1px;
  border-radius: 1px;
  background: var(--cex-h-c) !important;
  box-shadow: 0 5px 0 var(--cex-h-c);
}
.cex-bar-collapsed .cex-comment-bar-handle:hover::after,
.cex-bar-collapsed #jm-pdf-bar-handle:hover::after,
.cex-cmp-footer-collapsed .cex-comment-bar-handle:hover::after { --cex-h-c: #A89E94; }
.cex-bar-collapsed .cex-comment-bar-handle.cex-handle-pressed::after,
.cex-bar-collapsed #jm-pdf-bar-handle.cex-handle-pressed::after,
.cex-cmp-footer-collapsed .cex-comment-bar-handle.cex-handle-pressed::after { --cex-h-c: #8E7E74; }

/* ── Полоска футера — единый вид для всех футеров ──────────────────────────
   Под картой (#jm-pdf-bar-handle), в сравнении (#compare-comment-bar-handle),
   в футерах сессии (.cex-psych-note-host) и над мини-обзором «Совместности/
   Изменений на картах» (.cex-cmp-footer-handle): одна и та же зона захвата —
   черта в 6px от верхней рамки футера и 6px под ней (там же вторая черта
   свёрнутого футера). Раньше у каждого футера
   были свои поля (8/0, 5/5, 2/8), и полоска стояла на разной высоте. */
.cex-comment-bar-handle,
#jm-pdf-bar-handle,
.cex-psych-note-host .cex-comment-bar-handle,
.cex-footer .cex-cmp-footer-handle {
  padding: 6px 0 6px;
  cursor: ns-resize;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; outline: none;
  touch-action: none;
}

/* Заголовок модала описания фразы/заголовка — одна строка: плашка «Такт 1.1»,
   тихая подпись зоны и текст крупным шрифтом (_cexNoteHeadNode, history.js);
   то же — во всплывающем окне на «Устройстве карты». */
.cex-note-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #E6DFD4; }
.cex-note-head-tact { flex-shrink: 0; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: .02em; color: #5A5049; background: #EFE9DD; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.cex-note-head-zone { flex-shrink: 0; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text);
  white-space: nowrap; padding-right: 10px; border-right: 1px solid #DDD5CB; }
.cex-note-head-text { flex: 1; min-width: 0; font-family: 'Cormorant Garamond', serif; font-size: var(--fs-serif-s);
  font-weight: 600; line-height: 1.25; color: #28231E; word-break: break-word; }
.cex-note-head-text.is-empty { color: #BEB4A8; font-style: italic; font-weight: 400; }
.cex-note-head-text .cex-task-view { font: inherit; color: inherit; }
.cex-note-head-text input { font-family: 'Jost', sans-serif; }
/* Узкий экран: плашка и подпись зоны — первой строкой, текст — второй, во всю ширину. */
@media (max-width: 520px) {
  .cex-note-head { flex-wrap: wrap; gap: 6px 10px; }
  .cex-note-head-zone { flex-shrink: 1; white-space: normal; border-right: none; padding-right: 0; }
  .cex-note-head-text { flex: 1 1 100%; }
}

/* Страница сравнения: кнопки — обычный .cex-footer под баром с полем комментария
   (бар без собственного ряда кнопок, граница — у футера). */
.cex-comment-bar--no-actions { padding-bottom: 0; border-bottom: none; }
.cex-footer--attached { border-top: none; padding-top: 8px; }

/* ── Единый вид «скопировать ссылку» (globals.js: cexMakeLinkCopyBtn,
   cexLinkCopyFlash) ──────────────────────────────────────────────────────────
   Текст ссылки не показываем: поле с адресом скрыто (.cex-link-hidden), а
   вместо него — кнопка со звеном и подписью; после копирования 2 секунды
   «Скопировано» с галочкой. --ink — главное действие окна, --sm — в строке
   списка ссылок. */
.cex-link-hidden { position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cex-linkcopy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #CEC4B8; background: #FCFAF6; color: #28231E;
  font-family: 'Jost', sans-serif; font-size: var(--fs-ui); font-weight: 500; line-height: 1.2;
  cursor: default; transition: background .12s, border-color .12s, color .12s;
}
.cex-linkcopy:hover { background: #F0EBE1; }
.cex-linkcopy:disabled { opacity: .6; cursor: default; }
.cex-linkcopy .cex-icon { width: 18px; height: 18px; flex: none; }
.cex-linkcopy-di, .cex-linkcopy-d { display: none; }
.cex-linkcopy.is-done { border-color: #8EA68C; background: #F0F7F0; color: #2D6B37; }
.cex-linkcopy.is-done .cex-linkcopy-i, .cex-linkcopy.is-done .cex-linkcopy-l { display: none; }
.cex-linkcopy.is-done .cex-linkcopy-di { display: inline-block; }
.cex-linkcopy.is-done .cex-linkcopy-d { display: inline; }
.cex-linkcopy--ink { background: #5A5049; border-color: #5A5049; color: #FFFFFF; }
.cex-linkcopy--ink:hover { background: #28231E; border-color: #28231E; }
.cex-linkcopy--ink.is-done { background: #2D6B37; border-color: #2D6B37; color: #FFFFFF; }
.cex-linkcopy--sm { width: auto; flex-shrink: 0; padding: 4px 10px; border-radius: 6px; font-size: var(--fs-small); gap: 6px; }
.cex-linkcopy--sm .cex-icon { width: 15px; height: 15px; }

/* ── «Разметки» — раздел «Разработки карты» (markups.js, screens/map-dev-markups.html) ── */
/* Меню досок («Задачи», #tasks-board-menu): названия не переносятся, пока
   помещаются в экран — меню растёт по самому длинному, не шире экрана
   (общий потолок .cex-dropdown-menu в 300px здесь снят). */
#tasks-board-menu { max-width: calc(100vw - 16px); }

/* Открытая разметка в шапке «Разметок» (#mkp-item-title) — кнопка-выбор
   того же вида, что доска в «Задачах» (класс .tasks-hdr-board выше): по
   центру, а тесно — .mkp-hdr--side (_cexMkpFitTitle, markups.js): справа
   вместо «Разметки», длинное имя обрезается многоточием. Её меню
   (#mkp-pick-menu) — как меню досок: не шире экрана. */
#mkp-pick-menu { max-width: calc(100vw - 16px); }
.mkp-hdr-item { left: 50%; right: auto; transform: translateX(-50%); }
.cex-hdr.mkp-hdr--side .mkp-hdr-item { left: auto; right: 22px; transform: none; overflow: hidden; text-overflow: ellipsis; }
.cex-hdr.mkp-hdr--side #mkp-title { display: none; }
.mkp-form { display: flex; flex-direction: column; gap: 10px; max-width: 960px; margin: 0 auto; }
.mkp-sec { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #FCFAF7; border: 1.5px solid #DDD5CB; border-radius: 12px; min-width: 0; }
.mkp-h { font-family: 'Roboto Flex', sans-serif; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9A8E84; }
/* Заголовок блока и список оси — одной строкой. */
.mkp-hrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--cex-filter-h); }
.mkp-hrow .mkp-h { flex: 1 1 auto; min-width: 0; }
.mkp-hrow .cex-fs-btn, .mkp-hrow select.cex-filter { flex: 0 1 auto; max-width: 56%; }
/* Пары «подпись — поле» и «номер — поле — i» в одну строку. */
.mkp-kv, .mkp-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mkp-kv .cex-filter, .mkp-line .cex-filter { flex: 1 1 auto; width: auto; min-width: 0; }
.mkp-k { flex: 0 0 84px; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); }
.mkp-num { flex: 0 0 26px; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); text-align: right; }
/* «i» описания — как у фразы в редакторе версий: зелёное, когда описание есть. */
.mkp-i { flex: 0 0 auto; background: none; border: 0; padding: 2px 4px; line-height: 0; cursor: default; color: #BEB4A8; }
.mkp-i.has { color: #8EA68C; }
.mkp-i.is-open { color: #28231E; }
.mkp-desc { margin: 0 0 2px 32px; box-sizing: border-box; padding: 6px 10px; min-height: 52px; resize: vertical;
  border: 1.5px solid #CEC4B8; border-radius: 6px; background: var(--cex-filter-bg, #FCFAF6);
  font-family: 'Jost', sans-serif; font-size: var(--fs-input); line-height: 1.35; color: #28231E; outline: none; }
.mkp-desc:focus { border-color: #9A8E84; }
.mkp-desc[hidden] { display: none; }
/* «Показ»: вид, кнопка и порядок — одной строкой (на узком переносится). */
.mkp-show { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 90px; }
.mkp-show .cex-fs-btn, .mkp-show select.cex-filter { flex: 1 1 140px; }
.mkp-ord { display: inline-flex; align-items: center; gap: 4px; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); }
.mkp-ord .cex-filter { width: 58px; }
.mkp-swap-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-left: 90px; }
.mkp-swap-row { display: inline-flex; align-items: center; gap: 7px; font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #28231E; }
.mkp-swap-row input { margin: 0; width: 17px; height: 17px; accent-color: #8EA68C; cursor: default; }
.mkp-swap > div:last-child { padding-left: 90px; }
@media (max-width: 480px) { .mkp-swap-checks, .mkp-swap > div:last-child { padding-left: 0; } }
.mkp-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .mkp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .mkp-k { flex-basis: 70px; }
  /* Телефон: вид и № — первой строкой, кнопка — второй, во всю ширину. */
  .mkp-show { padding-left: 0; }
  .mkp-show > :nth-child(1) { order: 1; flex: 1 1 0; }
  .mkp-show .mkp-ord { order: 2; }
  .mkp-show > :nth-child(2):not(.mkp-ord), .mkp-show > :nth-child(3):not(.mkp-ord) { order: 3; flex: 1 1 100%; }
  .mkp-h-sub { display: none; }
}

/* Меню разделов «Разработки карты»: подписи пунктов — в одну строку. */
#map-dev-mode-menu .cex-dropdown-menu-btn span { white-space: nowrap; }

/* «Мои слоты» (booking.js, screens/booking-slots.html): дни недели и сетка
   начал слотов. Цвета состояний — те же, что у подложек такта и кнопок:
   открыт — зелёный акцент, ждёт — пунктир, запись — тёмная кнопка. */
.bk-days { display: flex; gap: 6px; }
.bk-days--client { flex-wrap: wrap; }
.bkd-pick-label { display: none; }
.bk-day {
  flex: 1 1 0; min-width: 0; padding: 6px 0; text-align: center; cursor: default;
  font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #5A5049; line-height: 1.2;
  background: #F8F4EE; border: 1.5px solid #CEC4B8; border-radius: 9px;
}
.bk-day b { display: block; font-size: var(--fs-body); font-weight: 600; color: #28231E; }
.bk-day small { display: block; font-size: 11px; color: #5C6C5B; min-height: 13px; }
/* Дата с открытыми слотами — зелёная (у клиента и в «Моих слотах»). */
.bk-day.has-open { background: #E6EFE3; border-color: #9DB59A; color: #4F6B4D; }
.bk-day.has-open b { color: #2E4A2D; }
.bk-day.is-on { background: #5A5049; border-color: #5A5049; color: #F0EBE1; }
.bk-day.is-on.has-open { box-shadow: inset 0 0 0 2px #8EA68C; }
.bk-day.is-on b, .bk-day.is-on small { color: #F0EBE1; }
.bk-day.is-past { opacity: .45; }
.bk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 400px) { .bk-slots { grid-template-columns: repeat(3, 1fr); } }
.bk-slot {
  padding: 9px 4px; text-align: center; cursor: default; font-variant-numeric: tabular-nums;
  font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 500; color: #5A5049;
  background: #F8F4EE; border: 1.5px solid #CEC4B8; border-radius: 9px; line-height: 1.2;
}
.bk-slot small { display: block; font-size: 11px; font-weight: 400; color: var(--c-muted-text); }
.bk-slot.is-open { background: #8EA68C; border-color: #8EA68C; color: #fff; }
.bk-slot.is-open small { color: #F0EBE1; }
.bk-slot.is-held { border-style: dashed; color: #9A8E84; cursor: default; }
.bk-slot.is-booked { background: #5A5049; border-color: #5A5049; color: #F0EBE1; }
.bk-slot.is-booked small { color: #CEC4B8; }
.bk-slot.is-past { opacity: .38; cursor: default; }
.bk-slot:disabled { cursor: default; }
/* Клиент: выбранный слот на экране записи. */
.bk-slot.is-sel { background: #5A5049; border-color: #5A5049; color: #F0EBE1; }
/* Карточки записи («Мои записи», запись на слоте у психолога). */
.bk-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: #F5EEE1; border: 1.5px solid #CEC4B8; border-radius: 14px; }
.bk-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bk-card-when { font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 600; color: #28231E; }
.bk-card-status { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); font-weight: 600; border-radius: 6px; padding: 1px 7px; border: 1px solid #CEC4B8; color: #5A5049; white-space: nowrap; }
.bk-card-status.is-wait { color: #8B6F4E; border-color: #D9C7A6; }
.bk-card-status.is-ok { color: #5A9E6F; border-color: #B9D6BA; }
.bk-card-status.is-off { color: var(--c-muted-text); }
.bk-card-line { font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5A5049; line-height: 1.45; word-break: break-word; }
.bk-card-line b { color: #28231E; font-weight: 600; }
.bk-card-reply { font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #28231E; background: #FCFAF6; border: 1px solid #DDD5CB; border-radius: 9px; padding: 8px 10px; white-space: pre-wrap; }
.bk-card-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* «Карта с психологом» — три шага записи (booking.js, screens/booking-*.html).
   Шапка «что это» на шаге 1 — классы модала «Живой сессии» (.consult-eyebrow,
   .consult-benefit, css/modal.css) без его отступов; варианты формата на
   шаге 3 — .consult-opt оттуда же. */
/* Верх шага 1 — то, ради чего пришли: обычный кегль и тёмный текст на светлой
   плашке (решение владельца: мелкий серый капслок читался плохо). */
.bk-step { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bk-step-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: var(--fs-serif-s); color: #28231E; }
.bk-step-num { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #9A8E84; white-space: nowrap; }
/* Строка статуса/ошибки в конце экрана записи: пока в ней пусто, места не занимает —
   иначе её min-height, gap и нижнее поле удлиняли область прокрутки, и на узком
   экране появлялась прокрутка при полностью видимом содержимом. */
.bk-status { min-height: 16px; }
.bk-status:empty { display: none; }
.bk-label { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: #5A5049; }
/* Карточка психолога шага 1 и шапка шага 2 */
.bk-pcard-top { display: flex; gap: 12px; align-items: flex-start; }
.bk-pcard-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bk-pcard-name { font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 600; color: #28231E; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Строка цен: части не рвутся — не влезла вторая, уходит целиком на новую строку */
.bk-price-line { display: flex; flex-wrap: wrap; column-gap: 6px; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5A5049; }
.bk-price-line > span { white-space: nowrap; }
/* Длинная вторая часть «· Участие в научном исследовании M ₽ −K%»: подпись
   переносится по словам, цена со скидкой — неразрывно. */
.bk-price-line > span.bk-price-res { white-space: normal; }
.bk-price-line .bk-price-num { white-space: nowrap; }
.bk-price-line .bk-off { color: var(--c-accent-text); }
.bk-types-note { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.45; color: var(--c-muted-text); }
/* Самопрезентация на плашке психолога — до трёх строк, раскрыто — целиком */
/* «Стоимость · …» в подробностях — строкой; части цены не рвутся, вторая
   уходит на новую строку целиком */
.bk-detail-price .bk-price-line { display: inline; font-size: inherit; }
.bk-pcard-next { font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: var(--c-accent-text); }
.bk-pcard-details { display: none; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E2D9CC; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5A5049; line-height: 1.45; }
.bk-pcard-details b { font-weight: 400; color: #9A8E84; }
.bk-pcard-details .bk-pres { white-space: pre-wrap; word-break: break-word; }
/* «Подробнее о психологе» под карточкой шага 1 */

/* ── Шаг 1 «Карты с психологом» ─────────────────────────────────────────
   Вид страницы один — «Тёплое письмо» (data-bk-design="a" на
   #scr-booking-catalog; прежний вид и вариант 2 удалены — решение
   владельца). */
.bk-cat-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; display: flex; flex-direction: column; gap: 14px; scrollbar-gutter: stable; }
/* scrollbar-gutter: место под полосу прокрутки держится всегда. Без него, когда
   содержимое ниже вырастало (выбрали окно — появились формат и сводка) и
   появлялась полоса прокрутки, колонка шагов становилась уже на её ширину —
   вместе с плашкой психолога. */
.bk-cat-loading { padding: 30px 0; }
.bk-cat-empty { flex-direction: column; gap: 12px; align-items: center; text-align: center; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: var(--c-muted-text); padding: 20px 0; }
.bk-cat-list { display: flex; flex-direction: column; gap: 10px; }
.bk-cat-alt { align-self: flex-start; }
#scr-booking-catalog[data-bk-design="a"] .bkd-a { display: block; }


/* Колонка по центру, разделы — воздухом, а не рамками */
#scr-booking-catalog[data-bk-design="a"] { --bkd-col: 620px; }
#scr-booking-catalog[data-bk-design="a"] .bk-cat-scroll { gap: 0; padding: 0 16px 32px; }
#scr-booking-catalog[data-bk-design="a"] .bk-cat-scroll { background: linear-gradient(180deg, #F8F2E8 0, #F0EBE1 480px) local; }   /* local — градиент уезжает вместе с шапкой */
#scr-booking-catalog[data-bk-design="a"] .bk-cat-scroll > * { width: 100%; max-width: var(--bkd-col); margin-left: auto; margin-right: auto; box-sizing: border-box; }
#scr-booking-catalog[data-bk-design="a"] .bk-cat-alt { width: auto; align-self: center; margin-top: 24px; text-align: center; }
#scr-booking-catalog[data-bk-design="a"] .bk-status { margin-top: 12px; }
.bkd-eyebrow { margin: 0 0 10px; font-family: 'Jost', sans-serif; font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-text); }
.bkd-title { margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.2rem); line-height: 1.08; color: #28231E; }
.bkd-lead { margin: 0 0 22px; font-family: 'Jost', sans-serif; font-size: var(--fs-lead); line-height: 1.55; color: #5A5049; }
.bkd-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: var(--fs-serif-m); line-height: 1.2; color: #28231E; }
.bkd-step { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); font-weight: 400; color: #9A8E84; white-space: nowrap; }
.bkd-sub { margin: -8px 0 0; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.5; color: var(--c-muted-text); }
.bkd-list-head { padding-bottom: 16px; }
/* Ромбик сайта (#i-diamond-logo) над подписью — как в окне «Живой сессии» */
.bkd-diamond { display: block; width: 46px; height: 46px; margin: 0 0 14px; }
.bkd-gain-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(142, 166, 140, .16); color: #5C6C5B; display: flex; align-items: center; justify-content: center; }
.bkd-gain-ico .cex-icon { width: 21px; height: 21px; }

/* Карточка психолога новых видов (_cexBkNewCard) */
.bkd-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: #FFFDF9; border: 1px solid #E6DDD0; border-radius: 20px; box-shadow: 0 1px 2px rgba(60, 45, 30, .04), 0 14px 30px -18px rgba(60, 45, 30, .22); }
.bkd-card-head { display: flex; gap: 14px; align-items: center; cursor: default; }
.bkd-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bkd-card .bk-pcard-name { font-size: var(--fs-lead); }
.bkd-card-edu { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.4; color: var(--c-muted-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bkd-card-pres { margin: 0; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.55; color: #4A423C; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bkd-card-pres.is-full { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.bkd-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: var(--c-muted-text); }
.bkd-price b { font-weight: 600; color: #28231E; }
.bkd-next { display: inline-flex; align-items: center; gap: 8px; color: var(--c-accent-text); }
.bkd-next::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #8EA68C; box-shadow: 0 0 0 3px rgba(142, 166, 140, .22); }
.bkd-next.is-none { color: var(--c-muted-text); }
.bkd-next.is-none::before { background: #CEC4B8; box-shadow: none; }
.bkd-reviews .bk-link { font-size: inherit; }
.bkd-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 2px; }
.bkd-card-btn { gap: 6px; padding: 10px 16px 10px 20px; border-radius: 12px; }
.bkd-more { display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px; border: 0; background: none; cursor: default; font-family: 'Jost', sans-serif; font-size: var(--fs-small); font-weight: 500; color: var(--c-accent-text); }
.bkd-more svg { color: #9A8E84; }
/* «Подробнее» — в правой части карточки варианта 1 (на шаге 1 — справа от
   «Выбрать время», без неё — тоже справа) и шапки психолога на шаге 2. */
.bkd-card--a .bkd-card-actions .bkd-more { margin-left: auto; }
/* Фото психолога в варианте 1 — вдвое крупнее (120px на шаге 1, 96px на шаге 2);
   на самом узком экране чуть меньше, чтобы имени хватало места. */
/* Карточка психолога шага 1: круглое фото 120px слева, всё остальное —
   колонкой правее; на телефоне фото 84px (до 360px — 72px), чтобы колонке
   хватало места. */
.bkd-card--side { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 20px; align-items: start; }
.bkd-card--side .bkd-card-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0; }
.bkd-card--side .bkd-card-head { gap: 0; }
/* «Подробнее» — на всю ширину плашки под фото (решение владельца) */
.bkd-card--side .bkd-details--wide { grid-column: 1 / -1; margin-top: 16px; }
@media (max-width: 480px) {
  .bkd-card--side { grid-template-columns: 126px minmax(0, 1fr); column-gap: 14px; }
  .bkd-card--side .bkd-avatar { width: 126px !important; height: 126px !important; }
}
@media (max-width: 360px) {
  .bkd-card--side { grid-template-columns: 108px minmax(0, 1fr); column-gap: 12px; padding: 16px 14px; }
  .bkd-card--side .bkd-avatar { width: 108px !important; height: 108px !important; }
}
/* «Фото крупно» — шапка психолога на шаге 2 (_cexBkPsychHead): фото во всю
   ширину сверху; от 560px — колонкой слева во всю высоту плашки. */
.bkd-card--photo { padding: 0; overflow: hidden; gap: 0; }
.bkd-photo { aspect-ratio: 4 / 3; background: #EDE6DA; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; font-weight: 600; color: #9A8E84; overflow: hidden; }
.bkd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.bkd-card-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; min-width: 0; }
.bkd-card--photo .bkd-card-head { gap: 0; }
.bkd-card--photo .bk-pcard-name { font-size: var(--fs-lead); }
@media (min-width: 560px) {
  .bkd-card--photo { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
  .bkd-card--photo .bkd-photo { aspect-ratio: auto; height: 100%; min-height: 250px; }
  .bkd-card--photo .bkd-card-body { padding: 22px 24px 22px; }
}
.bkd-card-actions--end { justify-content: flex-end; margin-top: -4px; }
.bkd-more-lbl { display: inline-grid; text-align: right; }
.bkd-more-lbl > span { grid-area: 1 / 1; }
.bkd-more-ghost { visibility: hidden; }
.bk-pcard-details.bkd-details { margin: 0; padding: 12px 14px; border-top: 0; border-radius: 12px; background: #F7F2EA; gap: 6px; }

/* Вариант 1 «Тёплое письмо» */
/* Верх рассказа не прижат к шапке: воздух сверху растёт с высотой экрана,
   ромб крупнее и отделён от подписи, подпись — от заголовка (решение владельца). */
.bkd-a-hero { padding: clamp(40px, 7vh, 72px) 4px 6px; text-align: center; }
.bkd-a-hero .bkd-eyebrow { margin-bottom: 14px; }
.bkd-a-hero .bkd-lead { margin: 0 auto 12px; max-width: 32em; }
.bkd-ticks { list-style: none; margin: 0 auto 26px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 34em; font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #3E3631; }
.bkd-ticks li { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.bkd-ticks li::before { content: '✓'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(142, 166, 140, .16); color: #6E8C6C; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.bkd-a-hero .bkd-diamond { width: 60px; height: 60px; margin: 0 auto 24px; }
.bkd-cta { min-width: 220px; border-radius: 12px; }
.bkd-cta-note { margin: 10px 0 0; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); }
.bkd-a-section { padding-top: 40px; }
#bkd-a-list-head { padding-bottom: 16px; }
.bkd-gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bkd-gain { display: flex; gap: 14px; align-items: flex-start; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.5; color: #5A5049; }
.bkd-gain b { display: block; margin-bottom: 2px; font-size: var(--fs-body); font-weight: 600; color: #28231E; }
@media (min-width: 640px) {
  .bkd-gains { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .bkd-gain { flex-direction: column; gap: 12px; }
  .bkd-gains--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}
/* Вопросы варианта 1 (без заголовка) — плитками со значками; на широком
   экране — в две колонки, при нечётном числе последний — во всю ширину. */
.bkd-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bkd-qs li { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border: 1px solid #E6DDD0; border-radius: 16px; background: #FFFDF9; font-family: 'Jost', sans-serif; font-size: var(--fs-body); line-height: 1.4; color: #28231E; }
@media (min-width: 640px) {
  .bkd-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bkd-qs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.bkd-q-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #F3ECE1; color: #5A5049; display: flex; align-items: center; justify-content: center; }
.bkd-q-ico .cex-icon { width: 21px; height: 21px; }
/* Переход «вопрос → ответ»: уголок вниз между плитками и плашкой ответа */
.bkd-arrow { display: flex; justify-content: center; margin: 14px 0; color: #8EA68C; }
.bkd-arrow .cex-icon { width: 26px; height: 26px; }
.bkd-answer { padding: 20px; border-radius: 22px; background: rgba(142, 166, 140, .16); }
.bkd-answer .bkd-h2 { margin-bottom: 12px; }
/* «Карта даст ответ» варианта 1 — ответы строками прямо на зелёной плашке:
   круглый зелёный значок своего набора (часы, метка, глаз, лампочка; у
   вопросов выше — бежевые квадратные плитки и другие значки), слово ответа
   и пояснение под ним. Две колонки — от 520px; четыре в ряд не ставим:
   «Определённо» не помещалось в узкую ячейку. */
.bkd-ans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.bkd-ans li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(110, 140, 108, .24); }
.bkd-ans li:first-child { border-top: 0; padding-top: 2px; }
.bkd-ans li:last-child { padding-bottom: 0; }
@media (min-width: 520px) {
  .bkd-ans { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  .bkd-ans li:nth-child(2) { border-top: 0; padding-top: 2px; }
  .bkd-ans li:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }
}
.bkd-ans-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #8EA68C; color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -8px rgba(79, 94, 78, .65); }
.bkd-ans-ico .cex-icon { width: 20px; height: 20px; stroke-width: 1.8; }
.bkd-ans-txt { min-width: 0; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.45; color: #4F5E4E; }
.bkd-ans-txt b { display: block; margin-bottom: 2px; font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; line-height: 1.15; color: #28231E; }
.bkd-soft { margin: 22px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(142, 166, 140, .13); font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.5; color: #4F5E4E; }
.bkd-unique { padding: 16px 18px; }
.bkd-unique b { display: block; margin-bottom: 2px; font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; line-height: 1.25; color: #28231E; }
/* Формат на шаге 2: плашки в одну линию, пока помещаются (от ~560px), иначе столбиком */
/* Две класса в селекторе — перебить .consult-opts (css/modal.css, колонка) */
.consult-opts.bk-types-row { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.consult-opts.bk-types-row > .consult-opt,
.consult-opts.bk-types-row > .bk-type-col { flex: 1 1 240px; min-width: 0; }
/* Плашка формата и её сноска «*» — одной колонкой */
.bk-type-col { display: flex; flex-direction: column; gap: 6px; }
.bk-type-col > .consult-opt { flex: 1 1 auto; }
.bk-type-col > .bk-types-note { padding: 0 4px; }
.bk-link { background: none; border: 0; padding: 0; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: default; text-align: left; }
/* Шаг 3: сводка выбранного времени и пояснение анониму */
.bk-sum { padding: 12px 14px; background: #F0EBE1; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; font-family: 'Jost', sans-serif; font-size: var(--fs-body); color: #5A5049; }
.bk-sum b { color: #28231E; font-weight: 600; }
.bk-sum-meta { font-size: var(--fs-meta); color: #9A8E84; }
.bk-sum-meta .bk-link { font-size: var(--fs-meta); }
.bk-anon { padding: 12px 14px; border: 1.5px dashed #8EA68C; border-radius: 12px; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.45; color: #5A5049; display: flex; flex-direction: column; gap: 6px; }
.bk-psych-row { display: flex; gap: 10px; flex-wrap: wrap; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5A5049; }
.bk-psych-row span { background: #FCFAF6; border: 1px solid #DDD5CB; border-radius: 7px; padding: 2px 8px; }
.bk-tpl-row { display: flex; align-items: center; gap: 8px; border-radius: 8px; }
/* Черновик шаблона сохранился (автосохранение, _cexBkTplFlashSaved) —
   изменённый день вспыхивает зелёным и гаснет. Тень вместо отступов: строка
   не сдвигается. */
.bk-tpl-row.is-saved { animation: bk-tpl-saved 1.6s ease-out; }
@keyframes bk-tpl-saved {
  0%, 25% { background: #DCEBD9; box-shadow: 0 0 0 5px #DCEBD9; }
  100%    { background: transparent; box-shadow: 0 0 0 5px transparent; }
}
.bk-tpl-row > span { width: 28px; flex-shrink: 0; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #5A5049; }
.bk-tpl-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bk-tpl-chip {
  font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #28231E;
  background: #F7F2EA; border: 1.5px solid #CEC4B8; border-radius: 8px;
  padding: 4px 8px 4px 10px; min-height: 0; display: inline-flex; align-items: center; gap: 6px;
}
.bk-tpl-chip span { color: #9A8E84; font-size: 1.1em; line-height: 1; }
.bk-tpl-chip:hover { border-color: #9A8E84; }
/* Время шаблона, начинающееся до конца предыдущего слота дня: при «Применить»
   не встанет (сервер пропускает пересечения) — _cexBkRenderTemplateRows. */
.bk-tpl-chip.is-clash { color: #A0503F; border-color: #E0A595; background: #FBEDE8; text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-tpl-add {
  position: relative; width: 36px; height: 30px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: #5A5049; color: #F7F2EA; border-radius: 8px;
  font-family: 'Jost', sans-serif; font-size: 20px; line-height: 1; overflow: hidden;
}
/* Поле времени лежит поверх «+» и невидимо: нажатие открывает системный выбор. */
.bk-tpl-add > input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0;
  font-size: 16px; /* меньше — iOS приближает страницу при фокусе */
}

/* ── «Стоимость сессии» в «Настройках психолога» (psych-settings.html) ──────
   Таблица формат × валюта: строки — форматы, столбцы — ₽ и €. Поля белые, как
   все суммы на этом экране; знак валюты — внутри поля справа. */
.bk-price-block { display: flex; flex-direction: column; gap: 6px; }
.bk-price-title { font-family: 'Jost', sans-serif; font-size: var(--fs-body); font-weight: 500; color: #28231E; }
.bk-price-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 10px; align-items: center; max-width: 420px;
}
.bk-price-head { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); padding-left: 2px; }
.bk-price-row { font-family: 'Jost', sans-serif; font-size: var(--fs-meta); color: var(--c-muted-text); }
.bk-price-cell { position: relative; display: block; min-width: 0; }
.bk-price-input {
  width: 100%; box-sizing: border-box; font-family: 'Jost', sans-serif; font-size: var(--fs-input);
  color: #28231E; background: #FFFFFF; border: 1.5px solid #CEC4B8; border-radius: 10px;
  padding: 9px 24px 9px 10px; outline: none;
}
.bk-price-input:focus { border-color: #9A8E84; }
/* Пустое поле показывает ПРИМЕР («напр. 4000») — бледно и курсивом, а знак
   валюты при нём приглушён: иначе «4000 ₽» читалось как уже введённая цена. */
.bk-price-input::placeholder { color: #BDB3A7; font-style: italic; font-size: var(--fs-meta); opacity: 1; }
.bk-price-input:placeholder-shown + .bk-price-sym { opacity: .35; }
.bk-price-sym {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: 'Jost', sans-serif; font-size: var(--fs-input); color: #9A8E84; pointer-events: none;
}
/* Плашки состояния в «Записи и оплате»: чего не хватает для каталога
   (#psych-booking-ready-note) и видят ли психолога клиенты
   (#psych-booking-listing) — цветом по состоянию (_cexBkCallout, booking.js). */
.bk-callout {
  font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.4; color: #28231E;
  border: 1.5px solid #E2D9CC; background: #F0EBE1; border-radius: 10px; padding: 10px 12px;
}
.bk-callout--warn { background: #FBF0DA; border-color: #E5BE74; }
.bk-callout--err  { background: #FBE6E2; border-color: #E2A196; }
.bk-callout--ok   { background: #E6EFE4; border-color: #A3BFA0; }
.bk-callout-title { font-weight: 500; }
.bk-callout ul { margin: 6px 0 0; padding-left: 18px; }
.bk-callout li + li { margin-top: 2px; }
.bk-callout-go {
  font: inherit; color: #4F6B4F; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: default;
}
/* То же коротко — плашкой в заголовке пункта, видно и в свёрнутом виде. */
.bk-head-state {
  flex-shrink: 0; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.2;
  white-space: nowrap; border-radius: 999px; padding: 3px 9px; border: 1.5px solid transparent;
}
.bk-head-state--warn { background: #FBF0DA; border-color: #E5BE74; color: #8A5A10; }
.bk-head-state--err  { background: #FBE6E2; border-color: #E2A196; color: #A3362A; }
.bk-head-state--ok   { background: #E6EFE4; border-color: #A3BFA0; color: #3F5F3E; }
.bk-head-state--muted { background: #F0EBE1; border-color: #E2D9CC; color: var(--c-muted-text); }

/* «Мои слоты» внутри «Записи и оплаты» (_cexBkMountSlots, booking.js): отделены
   чертой, как «Часы терапии» в «Образовании». Свои карточки слотов (шаблон
   недели, запись на слоте) здесь без подложки и рамки — только черта сверху,
   иначе вышла бы карточка в карточке. Дни недели — плотнее: блок уже экрана. */
.bk-settings-slots {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px; padding-top: 12px; border-top: 1.5px solid #E2D9CC;
}
#psych-booking-slots-host .cex-setting-row {
  background: transparent; border: 0; border-top: 1.5px solid #E2D9CC; border-radius: 0; padding: 12px 0 0;
}
#psych-booking-slots-host .bk-days { gap: 4px; }

/* ── Окно входа Clerk при масштабе приложения ────────────────────────────────
   Масштаб приложения (meta viewport, см. _cexViewportContent в index.html)
   сужает окно в CSS-пикселях: при 150% на телефоне оно ~260px, а карточка
   Clerk — 25rem (400px). Центрирование flex'ом выталкивало её левый край за
   экран, прокрутить к нему было нельзя. Карточка теперь не шире окна, а
   «автоотступ» вместо justify-content:center не даёт отрицательного смещения
   (при нехватке места окно просто прокручивается). */
.cl-modalBackdrop { overflow: auto !important; }
.cl-modalContent { max-width: 100vw !important; margin: auto !important; }
.cl-cardBox { max-width: calc(100vw - 16px) !important; }
.cl-card { max-width: 100% !important; box-sizing: border-box; }

/* «Отзывы клиентов» у владельца (screens/admin-reviews.html, followup.js) */
.cex-admin-review {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px;
  background: #F5EEE1;
  border: 1.5px solid #CEC4B8;
  border-radius: 12px;
  font-family: 'Jost', sans-serif;
}
.cex-admin-review-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-meta); color: var(--c-muted-text);
}
.cex-admin-review-chip {
  flex-shrink: 0;
  padding: 1px 9px;
  border-radius: 10px;
  border: 1px solid #CEC4B8;
  font-size: var(--fs-meta); color: #5A5049;
}
.cex-admin-review-chip.is-public { background: #EEF3EC; border-color: #A9BFA7; color: #3F5A3D; }
.cex-admin-review-unpub { align-self: flex-start; font-size: var(--fs-small); padding: 6px 14px; min-height: 0; margin-top: 2px; }
.cex-admin-review-text { font-size: var(--fs-body); color: #28231E; line-height: 1.45; }
.cex-admin-review-who { font-size: var(--fs-meta); color: var(--c-muted-text); line-height: 1.5; }

/* ── Шаги 2 и 3 «Карты с психологом» в виде варианта 1 ─────────────────────
   data-bk-design="a" ставит _cexBkApplyStepDesign (booking.js). Колонка
   620px по центру — полями прокрутки, а не шириной детей (ссылки и кнопки
   остаются своей ширины); карточки, дни, окна и сводка — как карточки шага 1. */
#scr-booking-psych[data-bk-design="a"] .bk-cat-scroll,
#scr-booking-confirm[data-bk-design="a"] .bk-cat-scroll { gap: 18px; padding: 22px max(16px, calc((100% - 620px) / 2)) 32px; background: linear-gradient(180deg, #F8F2E8 0, #F0EBE1 480px) local; }
#scr-booking-psych[data-bk-design="a"] .bk-step,
#scr-booking-confirm[data-bk-design="a"] .bk-step { margin-top: 4px; }
#scr-booking-psych[data-bk-design="a"] .bk-step-title,
#scr-booking-confirm[data-bk-design="a"] .bk-step-title { font-size: var(--fs-serif-m); line-height: 1.2; }
/* Шапка психолога — плашка 2 «Фото крупно» (.bkd-card--photo, _cexBkPsychHead). */
#scr-booking-psych[data-bk-design="a"] #booking-psych-card .bk-pcard-name { font-size: var(--fs-lead); }
/* Шапка — всегда на всю ширину колонки: иначе она подстраивалась под
   содержимое и при раскрытии «Подробнее» сужалась, а фото вытягивалось. */
#scr-booking-psych[data-bk-design="a"] #booking-psych-card { align-self: stretch; width: 100%; }
#scr-booking-psych[data-bk-design="a"] #booking-psych-card > .bkd-card { width: 100%; box-sizing: border-box; }
.bkd-card--head .bkd-card-body { gap: 10px; }
.bkd-card--head .bkd-details--wide { margin: 0 20px 20px; }
@media (min-width: 560px) {
  .bkd-card--head .bkd-details--wide { grid-column: 1 / -1; margin: 18px 24px 22px; }
}
/* Даты — узкие вертикальные кнопки лентой, время — широкие плашки; между
   ними подпись «Время · <день>» с чертой (_cexBkPickRender, _cexBkDaysStrip).
   Тот же вид — у «Моих слотов» психолога (решение владельца: почти как у
   клиента; _cexBkRender в режиме 'strip', _cexBkDayBtnV — одна кнопка даты
   на оба экрана). Дата с открытыми слотами — зелёная (.has-open), у клиента
   день без окон бледный и не нажимается (.is-empty), у психолога точка в
   углу — на дне есть запись (.has-booked). */
#scr-booking-psych[data-bk-design="a"] #booking-psych-pick { gap: 12px; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bkd-pick-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bkd-pick-label--date { justify-content: space-between; align-items: center; }
/* «Сегодня» справа от «Дата»: к сегодняшнему дню ленты (cexBookingPickToday,
   cexBookingToday). */
.bkd-today { padding: 5px 14px; border: 1px solid #DDD3C6; border-radius: 999px; background: #FFFDF9; font-family: 'Jost', sans-serif; font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: #5A5049; cursor: default; }
.bkd-today:hover { border-color: #8EA68C; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bkd-pick-label--time { margin-top: 10px; padding-top: 18px; border-top: 1px solid #E6DDD0; }
.bkd-pick-day { font-family: 'Jost', sans-serif; font-size: var(--fs-small); font-weight: 400; color: var(--c-muted-text); }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-days--strip { flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 -2px; padding: 2px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #DDD3C6 transparent; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-days--strip.is-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v { position: relative; flex: 0 0 auto; width: 58px; padding: 10px 0 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: #FFFDF9; border: 1px solid #E6DDD0; border-radius: 18px; scroll-snap-align: start; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v:hover { border-color: #8EA68C; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v b { font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v .bk-day-wd,
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v .bk-day-mon { font-size: var(--fs-meta); color: var(--c-muted-text); }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.has-open { background: #E6EFE3; border-color: #A9C2A6; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.has-open b { color: #2E4A2D; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.has-open .bk-day-wd,
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.has-open .bk-day-mon { color: #5C7A5A; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-empty { background: transparent; border-style: dashed; border-color: #E2D9CC; opacity: .55; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-empty:hover { border-color: #E2D9CC; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.has-booked::after { content: ''; position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #5A5049; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-on { background: #5A5049; border-color: #5A5049; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-on.has-open { box-shadow: inset 0 0 0 2px #8EA68C; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-on b { color: #F0EBE1; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-on .bk-day-wd,
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-on .bk-day-mon { color: #E2D9CC; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-day--v.is-on.has-booked::after { background: #F0EBE1; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-slots { gap: 10px; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-slot.is-open { padding: 11px 4px; background: #FFFDF9; border: 1px solid #DDD3C6; border-radius: 14px; color: #28231E; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-slot.is-open small { color: var(--c-muted-text); }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-slot.is-open:hover { border-color: #8EA68C; }
#scr-booking-psych[data-bk-design="a"] .bk-slot.is-open.is-sel { background: #5A5049; border-color: #5A5049; color: #F0EBE1; }
#scr-booking-psych[data-bk-design="a"] .bk-slot.is-open.is-sel small { color: #CEC4B8; }
:is(#scr-booking-psych, #booking-slots-main)[data-bk-design="a"] .bk-label { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-serif-s); font-weight: 600; color: #28231E; }
/* «Мои слоты» в виде варианта 1: колонка 620px, вместо стрелок недели — лента
   дат; кроме открытых слотов (как у клиента) — время, которое можно открыть
   (пунктир, «открыть»), «ждёт» и записи (тёмные). */
#booking-slots-main[data-bk-design="a"],
#scr-booking-slots[data-bk-design="a"] #booking-slots-gate { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
#booking-slots-main[data-bk-design="a"] #booking-slots-weeknav { display: none !important; }
#booking-slots-main[data-bk-design="a"] #booking-slots-tzline { margin-top: -6px !important; }
#booking-slots-main[data-bk-design="a"] .bk-slot { padding: 11px 4px; border-width: 1px; border-radius: 14px; }
#booking-slots-main[data-bk-design="a"] .bk-slot.is-free { background: transparent; border-style: dashed; border-color: #CFC5B8; color: #8A7F76; }
#booking-slots-main[data-bk-design="a"] .bk-slot.is-free small { color: #A79C92; }
#booking-slots-main[data-bk-design="a"] .bk-slot.is-free:not(:disabled):hover { border-color: #8EA68C; color: #5A5049; }
#booking-slots-main[data-bk-design="a"] .bk-slot.is-held { background: #FFFDF9; border-style: dashed; border-color: #8EA68C; color: #5A5049; }
#booking-slots-main[data-bk-design="a"] .bk-slot.is-booked { background: #5A5049; border-color: #5A5049; color: #F0EBE1; }
#scr-booking-psych[data-bk-design="a"] .consult-opt { background: #FFFDF9; border-color: #E6DDD0; border-radius: 18px; }
#scr-booking-confirm[data-bk-design="a"] .bk-sum { gap: 6px; padding: 18px; background: #FFFDF9; border: 1px solid #E6DDD0; border-radius: 20px; box-shadow: 0 1px 2px rgba(60, 45, 30, .04), 0 14px 30px -18px rgba(60, 45, 30, .22); }
#scr-booking-confirm[data-bk-design="a"] #booking-c-when { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 600; line-height: 1.2; font-variant-numeric: lining-nums; }
#scr-booking-confirm[data-bk-design="a"] .bk-label { font-size: var(--fs-small); color: #5A5049; }
#scr-booking-confirm[data-bk-design="a"] .cex-modal-input { border-radius: 14px; border-color: #DDD3C6; background: #FFFDF9; }
#scr-booking-confirm[data-bk-design="a"] .bk-anon { border: 0; border-radius: 16px; padding: 14px 16px; background: rgba(142, 166, 140, .15); color: #4F5E4E; }
#scr-booking-confirm[data-bk-design="a"] #booking-c-submit { border-radius: 12px; }


/* ── Шаг 1 в виде «Уютное расписание» (data-bk-design="b" на #scr-booking-catalog,
   переключатель владельца — «Запись к психологам»; разметка .bkd-b в
   screens/booking-catalog.html, карточка — _cexBkCardB, booking.js) ── */
#scr-booking-catalog .bkd-b { display: none; }
#scr-booking-catalog[data-bk-design="b"] .bkd-a { display: none; }
#scr-booking-catalog[data-bk-design="b"] .bkd-b { display: block; }
#scr-booking-catalog[data-bk-design="b"] { --bkd-col: 680px; }
#scr-booking-catalog[data-bk-design="b"] .bk-cat-scroll { gap: 0; padding: 0 16px 32px; background: #F4EFE6; }
#scr-booking-catalog[data-bk-design="b"] .bk-cat-scroll > * { width: 100%; max-width: var(--bkd-col); margin-left: auto; margin-right: auto; box-sizing: border-box; }
#scr-booking-catalog[data-bk-design="b"] .bkd-b-intro { padding: clamp(28px, 5vh, 48px) 2px 8px; }
.bkd-b-intro .bkd-eyebrow { margin-bottom: 8px; }
.bkd-b-title { margin: 0 0 10px; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); line-height: 1.1; color: #28231E; }
.bkd-b-lead { margin: 0; max-width: 34em; font-family: 'Jost', sans-serif; font-size: var(--fs-body); line-height: 1.55; color: #4A423C; }
#scr-booking-catalog[data-bk-design="b"] .bkd-b-list-head { padding: 26px 2px 6px; }
#scr-booking-catalog[data-bk-design="b"] .bkd-b-list-head .bkd-h2 { margin-bottom: 0; }
#scr-booking-catalog[data-bk-design="b"] .bk-cat-list { display: flex; flex-direction: column; gap: 0; }
/* Строка расписания: без рамок и теней, только черта между психологами. */
.bkd-card--b { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 18px; row-gap: 0; padding: 20px 2px 22px; background: none; border: 0; border-top: 1px solid #DDD5CB; border-radius: 0; box-shadow: none; }
.bkd-card--b:first-child { border-top: 0; }
.bkd-card--b .bkd-avatar { width: 108px !important; height: 108px !important; }
.bkd-card--b .bkd-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; }
.bkd-card--b .bkd-card-head { gap: 0; }
.bkd-card--b .bk-pcard-name { font-size: var(--fs-lead); }
.bkd-card--b .bkd-card-pres { -webkit-line-clamp: 2; line-clamp: 2; }
.bkd-b-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.bkd-b-time { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #CEC4B8; border-radius: 10px; background: #FCFAF6; font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: #28231E; cursor: default; }
.bkd-b-time b { font-weight: 500; }
.bkd-b-time small { font-size: var(--fs-meta); color: var(--c-muted-text); }
.bkd-b-time--more { background: none; border-style: dashed; color: var(--c-accent-text); }
.bkd-b-none { font-family: 'Jost', sans-serif; font-size: var(--fs-small); color: var(--c-muted-text); }
.bkd-card--b .bkd-card-actions { gap: 6px 14px; margin-top: 0; }
.bkd-card--b .bkd-more { padding-left: 0; }
.bkd-card--b .bkd-details--wide { grid-column: 1 / -1; margin-top: 12px; }
@media (max-width: 480px) {
  .bkd-card--b { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; }
  .bkd-card--b .bkd-avatar { width: 84px !important; height: 84px !important; }
}
#scr-booking-catalog[data-bk-design="b"] .bkd-b-about { margin-top: 34px; border-top: 1px solid #DDD5CB; }
.bkd-b-fold { border-bottom: 1px solid #DDD5CB; }
.bkd-b-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; list-style: none; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: var(--fs-serif-m); color: #28231E; cursor: default; }
.bkd-b-fold summary::-webkit-details-marker { display: none; }
.bkd-b-fold summary svg { width: 20px; height: 20px; color: #9A8E84; transform: rotate(-90deg); transition: transform .15s; }
.bkd-b-fold[open] summary svg { transform: none; }
.bkd-b-fold-body { padding: 0 2px 16px; font-family: 'Jost', sans-serif; font-size: var(--fs-small); line-height: 1.55; color: #4A423C; }
.bkd-b-fold-body p { margin: 0 0 10px; max-width: 36em; }
.bkd-b-fold-body p:last-child { margin-bottom: 0; }

/* Страница «Психологам»: свёрнутые разделы (_cexCourseAboutFoldSections). */
.cex-course-fold { margin: 10px 0; }
.cex-course-fold > .cex-setting-fold-body { gap: 10px; }
.cex-course-fold > .cex-setting-fold-body > :first-child { margin-top: 0; }
.cex-course-fold > .cex-setting-fold-body > :last-child { margin-bottom: 0; }
/* Заголовок свёрнутого раздела — тот же <h3>, что у открытых, без отступов. */
.cex-course-fold-title { flex: 1; min-width: 0; margin: 0 !important; }
/* Карта-иллюстрация над первым свёрнутым разделом (_cexCourseMapLoad). */
.cex-course-map { margin: 14px auto; width: 100%; max-width: 640px; }

/* Вторая строка «с 7 ноября» у кнопки создания карты, пока действует
   ограничение частоты (_cexSyncCreateNextDate, auth.js): строки прижаты
   влево друг к другу, группа — по центру кнопки. */
.intro-btn-2l { display: flex; flex-direction: column; align-items: flex-start; }
.intro-btn-sub { font-size: var(--fs-meta); font-weight: 400; line-height: 1.2; margin-top: 3px; white-space: nowrap; color: var(--c-muted-text); }
.cex-btn-ink .intro-btn-sub { color: #CEC4B8; }

/* Метка «Pro» у имени в меню-домике (_cexSyncMenuProBadge, auth.js):
   маленькая, в зелёном сайта, на уровне строки имени. */
.nav-menu-pro-badge {
  flex-shrink: 0;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #4F6A4D;
  background: #E6EEE3;
  border: 1px solid #C9D9C6;
  border-radius: 4px;
  padding: 2px 5px 2px;
}

/* ── Пробная карта (trial.js) ─────────────────────────────────────────────
   Тексты экранов интервью в двух вариантах: полный и пробный (body.cex-trial
   ставит _cexTrialSetMode). Сохранение и рекомендация «перед регулярным
   использованием» к пробе не относятся. */
.cex-trial-only { display: none; }
body.cex-trial .cex-trial-only { display: inline; }
body.cex-trial .cex-full-only { display: none !important; }
body.cex-trial #solo-save-anon,
body.cex-trial #solo-save-auth,
body.cex-trial #solo-recommendation { display: none !important; }

/* Размытие на карте — одно и то же при выборе (4 карточки выбраны —
   остальные отступают) и на итоговой карте (неисследованные такты). Размыты
   содержимое карточки и её стикер; замок на карточке — чёткий. Размеры — в
   координатах карты (1286px), на экране они уменьшаются вместе с ней. */
.map-container .card.cex-trial-locked > :not(.cex-trial-lock-badge),
.map-container.cex-trial-pick-full .card:not(.cex-trial-picked) > * {
  filter: blur(7px);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.map-container.cex-trial-pick-full .card:not(.cex-trial-picked),
.map-container .card.cex-trial-locked { box-shadow: -6px 2px 12px rgba(14,15,14,0.25); }
.map-container.cex-trial-pick-full .sticker:not(.cex-trial-picked),
.map-container .sticker.cex-trial-locked {
  background: #FFFFFF !important;   /* не «серый — не хватает информации»: такт не исследовали */
  opacity: 0.6;
}
/* Пока выбор идёт — карточки и стикеры откликаются на наведение. */
body.cex-trial-picking .map-container .card:hover > *,
body.cex-trial-picking .map-container .sticker:hover { filter: brightness(0.97); }
body.cex-trial-picking .map-container.cex-trial-pick-full .card:not(.cex-trial-picked):hover > * { filter: blur(7px); }
.cex-trial-pick-count { color: var(--c-muted-text); font-size: var(--fs-small); }

/* Замок на неисследованном такте итоговой карты: кружок по центру карточки. */
.cex-trial-lock-badge {
  position: absolute;
  left: 50%; top: 50%;
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(245,238,225,0.92);
  box-shadow: 0 2px 10px rgba(40,35,30,0.18);
  color: #5A5049;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
  pointer-events: none;
}
.cex-trial-lock-badge svg { width: 36px; height: 36px; }

/* Предложение консультации в футере итоговой карты пробы (#jm-trial-offer):
   замок, текст, кнопка; на узком экране кнопка уходит под текст. */
.cex-trial-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #E6EEE3;
  border: 1px solid #C9D9C6;
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-small);
  color: #28231E;
  line-height: 1.45;
}
.cex-trial-offer-icon { flex-shrink: 0; width: 22px; height: 22px; color: #4F6A4D; }
.cex-trial-offer-icon svg { width: 22px; height: 22px; display: block; }
.cex-trial-offer-text { flex: 1; min-width: 0; }
.cex-trial-offer-text b { font-weight: 600; }
.cex-trial-offer-btn { flex-shrink: 0; width: auto !important; white-space: nowrap; }
@media (max-width: 600px) {
  .cex-trial-offer { flex-wrap: wrap; }
  .cex-trial-offer-text { flex-basis: calc(100% - 32px); }
  .cex-trial-offer-btn { width: 100% !important; }
}

/* Размытый «полный обзор» под обзором пробы (_cexTrialReviewTeaserHtml):
   текст-призрак уходит в размытие и тает книзу, поверх него — карточка с
   предложением консультации. */
.cex-trial-teaser { position: relative; margin-top: 24px; clear: both; min-height: 460px; }
.cex-trial-teaser-ghost {
  filter: blur(5px);
  opacity: 0.6;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
.cex-trial-teaser-card,
.cex-trial-modal {
  background: #F5EEE1;
  border: 1px solid #CEC4B8;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(40,35,30,0.16);
  padding: 22px 20px 18px;
  text-align: center;
  font-family: 'Jost', sans-serif;
  color: #5A5049;
}
.cex-trial-teaser-card {
  position: absolute;
  left: 50%; top: 32px;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 16px));
  box-sizing: border-box;
}
.cex-trial-teaser-card p,
.cex-trial-modal-text { font-size: var(--fs-small); line-height: 1.5; margin: 0 0 10px; }
.cex-trial-teaser-card .cex-btn,
.cex-trial-modal .cex-btn { width: 100%; margin-top: 6px; }
.cex-trial-teaser-icon { width: 30px; height: 30px; margin: 0 auto 8px; color: #4F6A4D; }
.cex-trial-teaser-icon svg { width: 30px; height: 30px; display: block; }
.cex-trial-teaser-title,
.cex-trial-modal-title { font-size: var(--fs-body); font-weight: 600; color: #28231E; line-height: 1.4; margin: 0 0 10px; }
.cex-trial-modal { max-width: 340px; width: 90%; box-sizing: border-box; }

/* «Пробные карточки» владельца (trial.js, scr-admin-trial-maps): превью
   слева, сведения справа — как плитки остальных списков очищения. */
.cex-trial-map-tile {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: #F8F4EE; border: 1px solid #D6CFCA; border-radius: 12px;
}
.cex-trial-map-thumb { flex-shrink: 0; width: 72px; height: 72px; }
.cex-trial-map-thumb svg { display: block; }
.cex-trial-map-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-family: 'Jost', sans-serif; }
.cex-trial-map-title { font-size: var(--fs-body); color: #28231E; font-weight: 500; word-break: break-word; }
.cex-trial-map-meta { font-size: var(--fs-meta); color: var(--c-muted-text); line-height: 1.45; word-break: break-word; }
/* Как приблизить карту на выборе пробных карточек (_cexTrialZoomHint). */
.cex-trial-pick-hint { color: var(--c-muted-text); font-size: var(--fs-small); }
/* Пробный текст экрана интервью — по левому краю: по ширине на телефоне
   длинные слова («сохраняется», «Наибольший») растягивали пробелы строки. */
body.cex-trial #interview-text-solo > .reg-text:first-child { text-align: left !important; }
/* Обзор пробных карточек: «Записаться на консультацию к нам» под обзором не
   показываем — запись к психологу уже в карточке тизера (trial.js). */
body.cex-trial-final #jm-review-full-consult { display: none; }
/* Демонстрационная карта на «Карте с психологом» (вариант 1, #bkd-a-map,
   _cexBkMapMount в booking.js): карта во всю колонку, под ней кнопка к
   списку психологов. */
.bkd-map-section { text-align: center; }
.bkd-map-section .cex-course-map { margin: 0 auto 18px; }
/* Подпись под картой-иллюстрацией («Психологам», «Карта с психологом»,
   _cexCourseMapNote): мелко и приглушённо. */
.cex-course-map-note { margin: 8px 0 0; font-family: 'Jost', sans-serif; font-size: var(--fs-meta); line-height: 1.45; color: var(--c-muted-text); text-align: left; }
/* Удержание на карте-иллюстрации (_cexCourseMapHoldBind): долгое касание —
   не выделение текста и не системное меню телефона. */
.cex-course-map .cex-cmp-maps-frame { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cex-course-map-note-how { display: block; margin-top: 2px; }
/* Плашка «что такое карта» под демонстрационной картой записи — текстом
   влево, как «Метод не имеет аналогов», и с отступом до кнопки. */
.bkd-map-section .bkd-map-about { text-align: left; margin: 0 0 18px; }
/* «Начать» на выборе пробных карточек, пока не выбраны все 4 (trial.js):
   видно, что кнопка неактивна, — как «Назад» тура на первом кадре. */
#map-tour-done-btn[disabled] { opacity: 0.35; pointer-events: none; }