/* =============================================================================
   ЭКОСИСТЕМА — добавки поверх перенесённой дизайн-системы кофейного проекта.
   Здесь только то, чего нет в tokens/primitives/shell. Базовые правила —
   выше, мобильные media-query — строго в конце файла (грабля №1 плейбука).
   ============================================================================= */

/* Hero-плитка с иконкой вместо стороннего фото: у Экосистемы своих
   визуальных материалов нет, чужие не переносим по правилу проекта. */
.cw-hero__tile svg {
  width: var(--cw-hero-tile-size);
  height: var(--cw-hero-tile-size);
}

.cw-hero__title {
  white-space: pre-line;
}

/* Отступ первого блока контентной страницы. */
.cw-content > .cw-pageintro,
.cw-content > .cw-model,
.cw-content > .cw-metrics {
  margin-bottom: var(--cw-space-xxl);
}

.cw-pageintro {
  align-items: center;
}

/* Карточки-наполнители (kits, proofs) внутри сетки cardlink'ов. */
.cw-cards .cw-card {
  display: flex;
  flex-direction: column;
}

.cw-section__items .cw-card,
.cw-cards .cw-card {
  height: 100%;
}

.cw-card__head {
  align-items: flex-start;
}

.cw-card__head .cw-tag {
  flex: 0 0 auto;
}

/* Шаги петли и серий: тег состояния переносится, а не ломает строку. */
.cw-steps__item {
  flex-wrap: wrap;
}

/* Ссылки-«хлебные» теги модулей не обрезаются. */
.cw-stage__tag {
  white-space: normal;
}

/* Строки правил и списки. */
.cw-stage__result {
  white-space: pre-line;
}

/* Футер: ровная сетка на широком экране. */
.cw-footer {
  justify-content: space-between;
}

/* Зона трёх слоёв на главной (секция 02). Базовое .cw-section__items —
   сетка 1fr 1fr внутри узкой левой колонки .cw-section; здесь блок занимает
   всю ширину секции и раскладывается в три колонки с подложками-«пилюлями».
   Модификатор, а не базовое правило: .cw-section__items используется в 16
   местах сайта. Подложки — токены слоя 3, хардкодов нет. */
.cw-section__items--three {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cw-space-l);
}

.cw-section__items--three .cw-section__item {
  border-radius: var(--cw-radius-circular);
  padding: var(--cw-space-l) var(--cw-space-xl);
}

.cw-section__items--three .cw-section__item:nth-child(1) {
  background: var(--cw-layer-pill-1);
}

.cw-section__items--three .cw-section__item:nth-child(2) {
  background: var(--cw-layer-pill-2);
}

.cw-section__items--three .cw-section__item:nth-child(3) {
  background: var(--cw-layer-pill-3);
}

/* Подложки колонок провайдеров (решение владельца 16.10.2026): ID / имя —
   info (синий), Возможность — success (зелёный), Статус — warning (янтарный;
   совпадает с семантикой «предложено» в статус-мапе). Токены — те же, что у
   тегов (primitives.css); хардкодов цветов нет. */
.cw-table th.cw-cell--id,
.cw-table td.cw-cell--id {
  background: var(--cw-color-status-info-background);
  color: var(--cw-color-status-info-foreground);
}

.cw-table th.cw-cell--cap,
.cw-table td.cw-cell--cap {
  background: var(--cw-color-status-success-background);
  color: var(--cw-color-status-success-foreground);
}

.cw-table th.cw-cell--status,
.cw-table td.cw-cell--status {
  background: var(--cw-color-status-warning-background);
  color: var(--cw-color-status-warning-foreground);
}

/* Карточки трёх слоёв на /model выравниваются по верхней линии. В shell.css
   контейнер и слот центрируют содержимое по вертикали — с описаниями разной
   длины заголовки вставали на разной высоте (замер: 270/290/290 при 1440).
   Только ≥901px: на ≤900px shell.css переводит блок в колонку и растягивает
   детей по ширине, там это не нужно и мешало бы. */
@media (min-width: 901px) {
  .cw-model__layers {
    align-items: stretch;
  }

  .cw-model__layerslot {
    align-items: flex-start;
  }
}

.cw-toolcard__source {
  font-size: var(--cw-text-caption-1);
  line-height: var(--cw-leading-caption-1);
  color: var(--cw-color-neutral-foreground-4);
}

/* =============================================================================
   АДАПТИВ — только после базовых правил (иначе media-query мертвец).
   ============================================================================= */
@media (max-width: 900px) {
  .cw-pageintro {
    flex-direction: column;
    align-items: center;
    gap: var(--cw-space-m);
  }

  .cw-hero__tile {
    max-width: 280px;
  }

  /* Блок .cw-model__layers / __layerslot / __arrow на ≤900px переводится в
     колонку в shell.css (строки 991–1003). Здесь эти три правила стояли
     вторым экземпляром с теми же значениями — убрано 2026-10-20. */

  .cw-stage__tags {
    gap: var(--cw-space-xs);
  }
}

/* Зона трёх слоёв: три в ряд держим до 601px (на 768 блок 230px, переполнения
   нет), на мобильном — одна колонка. Граница 600px — та же, что закреплена
   для мобильной одноколоночной stage-сетки (B8, §4.1 стандарта). */
@media (max-width: 600px) {
  .cw-section__items--three {
    grid-template-columns: 1fr;
  }
}

/* === map: tool-card wall + nav sub-items (capabilities) === */
.cw-nav__row {
  display: flex;
  align-items: center;
  gap: var(--cw-space-xs);
}

.cw-nav__row .cw-nav__item {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.cw-nav__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cw-tile-xs);
  height: var(--cw-tile-xs);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--cw-radius-medium);
  color: var(--cw-color-neutral-foreground-3);
  cursor: pointer;
}

.cw-nav__toggle:hover {
  background: var(--cw-color-neutral-background-3);
  color: var(--cw-color-neutral-foreground-1);
}

.cw-nav__toggle:focus-visible {
  outline: var(--cw-focus-outline-width) solid var(--cw-focus-stroke);
  outline-offset: var(--cw-focus-outline-offset-inset);
}

/* Без этого правила атрибут hidden не сработает: у .cw-nav__sub задан
   display: flex, а авторское правило перебивает display: none из таблицы
   браузера — список остался бы раскрытым при aria-expanded="false". */
.cw-nav__sub[hidden] {
  display: none;
}

/* Строка «подпись → значение»: один компонент для блока заданий и для карточки
   инструмента — состав блоков у карточек обязан совпадать. */
.cw-caprow {
  margin: var(--cw-space-s) 0 0;
  font-size: var(--cw-text-body-1);
  line-height: var(--cw-leading-body-1);
  color: var(--cw-color-neutral-foreground-2);
}

.cw-caprow__label {
  display: block;
  font-size: var(--cw-text-caption-1);
  line-height: var(--cw-leading-caption-1);
  font-weight: 600;
  color: var(--cw-color-neutral-foreground-3);
}

.cw-capreadiness {
  font-weight: 600;
  color: var(--cw-color-neutral-foreground-1);
}

/* Стена карточек. Изначально была на CSS columns, но замер 17.10.2026 показал
   дефект: колонки балансируются ПО ВЫСОТЕ, а не по строкам, поэтому в средней
   колонке карточка выше на 16–48px и её сосед уезжает вниз (Firecrawl@403 /
   Cloudflare@451 / Replicate@435 при выровненном верхнем ряде). Владелец счёл
   это сбоем — решение 17.10.2026: ровные ряды с выравниванием высоты в ряду.
   Теперь сетка. Число колонок по-прежнему задано ШИРИНОЙ колонки
   (auto-fill + minmax(300px, 1fr)), а не медиазапросом: браузер сам считает,
   сколько колонок влезает в реальную ширину правой области после меню, поэтому
   новых брейкпоинтов нет. auto-fill (а не auto-fit) — чтобы направление с одной
   карточкой не растягивало её на всю ширину. 300px — минимум, при котором шапка
   карточки («Cloudflare Workers AI») и строки «подпись → значение» читаемы. */
.cw-wall {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--cw-space-l);
  align-items: stretch;
}

/* Стена занимает всю ширину секции: в узкой колонке 2fr сетки .cw-section ей
   не хватает места на три колонки. Шапка секции остаётся первой строкой. */
.cw-section--wall .cw-wall {
  grid-column: 1 / -1;
}

.cw-toolcard {
  padding: var(--cw-card-pad);
}

.cw-toolcard__head {
  display: flex;
  align-items: center;
  gap: var(--cw-space-m);
}

.cw-toolcard__tile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cw-tile-sm);
  height: var(--cw-tile-sm);
  border-radius: var(--cw-tile-radius-sm);
  background: var(--cw-icon-tile-bg);
  color: var(--cw-icon-tile-ink);
  font-family: var(--cw-font-body);
  font-size: var(--cw-text-caption-1);
  font-weight: 600;
}

.cw-toolcard__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cw-toolcard__name {
  font-size: var(--cw-text-body-1);
  font-weight: 600;
  color: var(--cw-color-neutral-foreground-1);
  overflow-wrap: anywhere;
}

.cw-toolcard__type {
  font-size: var(--cw-text-caption-1);
  line-height: var(--cw-leading-caption-1);
  color: var(--cw-color-neutral-foreground-3);
}

.cw-toolcard__status {
  margin-top: var(--cw-space-s);
}

.cw-toolcard .cw-caprow {
  font-size: var(--cw-text-caption-1);
  line-height: var(--cw-leading-caption-1);
}

.cw-toolcard__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cw-space-s);
  margin-top: var(--cw-space-m);
  padding-top: var(--cw-space-m);
  border-top: 1px solid var(--cw-card-border);
}

/* Текстовая ссылка — один компонент на два места (карточка инструмента и
   возврат «все направления»). До 2026-10-20 правила дублировались целиком,
   различался только кегль. */
.cw-toolcard__link,
.cw-themes__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cw-color-brand-foreground-link);
  font-family: var(--cw-font-body);
  text-decoration: underline;
  text-underline-offset: var(--cw-underline-offset);
  cursor: pointer;
}

.cw-toolcard__link {
  font-size: var(--cw-text-caption-1);
  line-height: var(--cw-leading-caption-1);
}

.cw-themes__link {
  display: inline;
  margin-top: var(--cw-space-s);
  font-size: var(--cw-text-body-1);
  line-height: var(--cw-leading-body-1);
}

.cw-toolcard__link:hover,
.cw-themes__link:hover {
  text-decoration-thickness: 2px;
}

.cw-toolcard__link:focus-visible,
.cw-themes__link:focus-visible {
  outline: var(--cw-focus-outline-width) solid var(--cw-focus-stroke);
  outline-offset: var(--cw-focus-outline-offset);
}


/* === map: back-link «все направления» reuses .cw-themes__link === */


/* ============================================================================
   СТАНДАРТНЫЙ БЛОК «ТОПОЛОГИЯ ПРОЕКТА» — одна разметка для всех проектов.
   Четыре зоны (Входы → Ядро → Результаты + Опора) в раскладке и палитре
   схемы PinBimBim (assets/img/pinbimbim-topology-d2.svg):
   контейнер зоны #f7f7f7 rx20; карточки входов #2e6b4e rx10, белый текст,
   подпись #d8e8e0; хайлайт ядра #f5a623 rx12, текст #3d2b00 / #5a4000;
   карточки ядра и результатов — белые с рамкой #ebebeb rx12, заголовок
   #1f1f1f, подпись #8a8a8a, стрелка #e09b00; опора — тёмная #1c1c1c с
   жёлтой обводкой #f5a623, под-карточки #262626 / рамка #3a3a3a,
   заголовок #e8e8e8, подпись #9a9a9a. Пилюля-счётчик акцентная.
   ========================================================================== */
.cw-section--topo {
  grid-template-columns: 1fr;
}

.cw-topo__summary {
  display: inline-flex;
  align-items: center;
  /* Секция — grid с одной колонкой, элемент stretched бы во всю ширину;
     justify-self возвращает пилюле компактную ширину по содержимому. */
  justify-self: start;
  margin-top: var(--cw-space-m);
  padding: var(--cw-space-xs) var(--cw-space-m);
  border: 1px solid #f0ddbb;
  border-radius: var(--cw-radius-circular);
  background: var(--cw-accent-tint);
  color: var(--cw-accent-deep);
  font-size: var(--cw-text-body-1);
  font-weight: 600;
  line-height: var(--cw-leading-body-1);
}

/* Сетка зон: 4 равные колонки. Входы — 1 колонка (~25%), Ядро — 3 (~75%),
   Результаты и Опора — по 2 (50/50): пропорции нижнего ряда как в SVG
   (560 / 536), верхний — 300 / 788. */
.cw-topo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cw-space-m);
  margin-top: var(--cw-space-l);
}

.cw-topo__zone {
  border-radius: 20px;
  padding: var(--cw-space-l);
  min-width: 0;
}

.cw-topo__zone--inputs { grid-column: 1 / 2; grid-row: 1; background: #f7f7f7; }
.cw-topo__zone--core { grid-column: 2 / -1; grid-row: 1; background: #f7f7f7; }
.cw-topo__zone--results { grid-column: 1 / 3; grid-row: 2; background: #f7f7f7; }
.cw-topo__zone--support {
  grid-column: 3 / -1;
  grid-row: 2;
  background: #1c1c1c;
  /* Обводка зоны повторяет SVG (stroke #f5a623 1.6): inset, чтобы не менять
     геометрию grid-ячейки. */
  box-shadow: inset 0 0 0 1.6px #f5a623;
}

/* ---------- шапка зоны: плитка-иконка + название + стандартная надпись ---------- */
.cw-topo__zone-head {
  display: flex;
  align-items: center;
  gap: var(--cw-space-m);
}

.cw-topo__zone-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.cw-topo__zone-headtext {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cw-topo__zone-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #1f1f1f;
}

.cw-topo__zone-note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: #8a8a8a;
}

.cw-topo__zone--inputs .cw-topo__zone-icon { background: var(--cw-brand-500); color: #ffffff; }
.cw-topo__zone--core .cw-topo__zone-icon { background: #fdf4e3; color: #3d2b00; }
.cw-topo__zone--results .cw-topo__zone-icon { background: #e8e8e8; color: #1f1f1f; }
.cw-topo__zone--support .cw-topo__zone-icon { background: var(--cw-accent-500); color: #1c1c1c; }
.cw-topo__zone--support .cw-topo__zone-title { color: #ffffff; }
.cw-topo__zone--support .cw-topo__zone-note { color: #9a9a9a; }

/* ---------- карточки зон ---------- */
.cw-topo__cards {
  display: grid;
  gap: 10px;
  margin-top: var(--cw-space-m);
}

.cw-topo__card {
  min-width: 0;
  border-radius: 12px;
  padding: 12px 16px;
}

.cw-topo__card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.cw-topo__card-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
}

.cw-topo__card-arrow {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.2;
}

/* Кликабельные ссылки на источники в карточках топологии (проект «Исток»). */
.cw-topo__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  opacity: 0.92;
}
.cw-topo__link:hover { opacity: 1; text-decoration-thickness: 2px; }
.cw-topo__sep { color: currentColor; opacity: 0.5; margin: 0 4px; }

/* Каталог источников — в одну колонку, как топология. Без этого базовый
   .cw-section (grid 1fr / 2fr) уводил примечание в правую колонку, а
   аккордеоны с категориями — в узкую левую (замер 26.10). */
.cw-section--catalog {
  grid-template-columns: minmax(0, 1fr);
}

/* Каталог источников проекта «Исток» (#/projects/istok/catalog).
   Только токены дизайн-системы: у каталога светлая подложка, поэтому цвет
   текста задаём явно — иначе он наследует тёмный и тонет в панели. */
.cw-istokcat__wrap { display: grid; gap: 10px; }
.cw-istokcat {
  border: 1px solid var(--cw-color-neutral-stroke-1);
  border-radius: 12px;
  background: var(--cw-color-neutral-background-2);
  padding: 2px 14px;
}
.cw-istokcat__sum {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--cw-color-neutral-foreground-1);
  padding: 11px 2px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cw-istokcat__sum::-webkit-details-marker { display: none; }
.cw-istokcat__sum::before { content: "\25B8"; color: var(--cw-color-brand-500); margin-right: 2px; }
.cw-istokcat[open] .cw-istokcat__sum::before { content: "\25BE"; }
.cw-istokcat__count {
  font-size: 12px;
  color: var(--cw-color-neutral-foreground-3);
  background: var(--cw-color-neutral-background-3);
  border-radius: 999px;
  padding: 1px 9px;
}
.cw-istokcat__list { margin: 0 0 12px; padding: 0; list-style: none; }
.cw-istokcat__list li {
  padding: 7px 2px;
  border-top: 1px solid var(--cw-color-neutral-stroke-2);
  color: var(--cw-color-neutral-foreground-1);
  font-size: var(--cw-text-body-1);
}
.cw-istokcat__type { color: var(--cw-color-neutral-foreground-3); font-size: 12px; margin-left: 6px; }
.cw-istokcat__empty { color: var(--cw-color-neutral-foreground-3); font-size: 13px; padding: 2px 0 12px; font-style: italic; }
/* Ссылка на источник в каталоге — фирменным зелёным, а не текущим цветом. */
.cw-istokcat__list .cw-topo__link { color: var(--cw-color-brand-foreground-link); }
.cw-istokcat__list .cw-topo__link:hover { color: var(--cw-brand-600); }

/* Вложенность каталога: секции (верхний уровень) → подгруппы внутри. */
.cw-istokcat--section > .cw-istokcat__sum { font-size: 16px; }
.cw-istokcat__subs {
  display: grid;
  gap: 8px;
  padding: 4px 0 10px 14px;
  margin-left: 6px;
  border-left: 2px solid var(--cw-color-neutral-stroke-2);
}
.cw-istokcat--sub {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.cw-istokcat--sub > .cw-istokcat__sum { font-size: 14px; padding: 8px 2px; }
.cw-istokcat--sub .cw-istokcat__list { margin-left: 12px; }

/* Входы: зелёные карточки в одну колонку (как 5 карточек в SVG). */
.cw-topo__zone--inputs .cw-topo__cards { grid-template-columns: 1fr; }

.cw-topo__zone--inputs .cw-topo__card {
  border-radius: 10px;
  background: var(--cw-brand-500);
  color: #ffffff;
}

.cw-topo__zone--inputs .cw-topo__card-sub { color: #d8e8e0; }

/* Ядро: жёлтый хайлайт + белые карточки в три колонки. */
.cw-topo__highlight {
  margin-top: var(--cw-space-m);
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--cw-accent-500);
  color: #3d2b00;
}

.cw-topo__highlight-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
}

.cw-topo__highlight-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: #5a4000;
}

.cw-topo__zone--core .cw-topo__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cw-topo__zone--core .cw-topo__card {
  background: #ffffff;
  border: 1px solid #ebebeb;
}

.cw-topo__zone--core .cw-topo__card-title { color: #1f1f1f; }
.cw-topo__zone--core .cw-topo__card-sub { color: #8a8a8a; }
.cw-topo__zone--core .cw-topo__card-arrow { color: #e09b00; }

/* Результаты: белые карточки в три колонки, текст мельче (как в SVG). */
.cw-topo__zone--results .cw-topo__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cw-topo__zone--results .cw-topo__card {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #ebebeb;
}

.cw-topo__zone--results .cw-topo__card-title { font-size: 12px; color: #1f1f1f; }
.cw-topo__zone--results .cw-topo__card-sub { font-size: 11px; color: #8a8a8a; }

/* Опора: тёмные под-карточки в две колонки. */
.cw-topo__zone--support .cw-topo__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cw-topo__zone--support .cw-topo__card {
  border-radius: 10px;
  padding: 10px 14px;
  background: #262626;
  border: 1px solid #3a3a3a;
}

.cw-topo__zone--support .cw-topo__card-title { font-size: 12px; color: #e8e8e8; }
.cw-topo__zone--support .cw-topo__card-sub { font-size: 11px; color: #9a9a9a; }

/* Пустая зона: стандартная надпись в шапке + пунктирная ячейка-заполнитель. */
.cw-topo__empty {
  margin-top: var(--cw-space-m);
  padding: var(--cw-space-l) var(--cw-space-m);
  border: 1px dashed #d5d5d5;
  border-radius: 12px;
  text-align: center;
  font-size: var(--cw-text-caption-1);
  line-height: var(--cw-leading-caption-1);
  color: #9a9a9a;
}

.cw-topo__zone--support .cw-topo__empty {
  border-color: #3a3a3a;
  color: #8f8f8f;
}

/* Планшет: зоны в одну колонку, карточки ядра и результатов — в две. */
@media (max-width: 900px) {
  .cw-topo { grid-template-columns: 1fr; }

  .cw-topo__zone--inputs,
  .cw-topo__zone--core,
  .cw-topo__zone--results,
  .cw-topo__zone--support { grid-column: 1; grid-row: auto; }

  .cw-topo__zone--core .cw-topo__cards,
  .cw-topo__zone--results .cw-topo__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Телефон: все карточные сетки в одну колонку. */
@media (max-width: 600px) {
  .cw-topo__zone--core .cw-topo__cards,
  .cw-topo__zone--results .cw-topo__cards,
  .cw-topo__zone--support .cw-topo__cards { grid-template-columns: 1fr; }
}


/* ============================================================================
   ИНТЕРАКТИВНАЯ СЕТКА ЭТАЖЕЙ — перенос чёрно-белого прототипа (2026-10-07).
   Сетка 2×2, разделители, центральный «+», инверсия активного поля и
   раскрытие списка арендаторов. Изолирована префиксом .cw-floorgrid;
   шрифт прототипа (Manrope) действует только здесь.

   Секция выведена из колонки контента на всю ширину окна (full-bleed),
   как в оригинальном полноэкранном прототипе: ширина 100vw и отрицательный
   отступ компенсируют padding и max-width родителя .cw-content.
   ========================================================================== */
.cw-section--floorgrid {
  /* Базовый .cw-section — grid с колонками 1fr / 2fr, из-за чего виджет
     попадал в первую колонку и занимал треть ширины (замер 21.10: 466px).
     Одна колонка + выход из боковых padding .cw-content → сетка на всю
     ширину контента, от края сайдбара до правого края окна. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: calc(100% + 2 * var(--cw-space-xxl));
  margin-left: calc(-1 * var(--cw-space-xxl));
  margin-right: calc(-1 * var(--cw-space-xxl));
  margin-bottom: var(--cw-space-xxl);
}

.cw-floorgrid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  min-height: min(78vh, 760px);
  background: #fff;
  font-family: "Manrope", var(--cw-font-display), system-ui, sans-serif;
  /* Заголовки и списки масштабируются от ширины самой сетки, а не окна:
     секция full-bleed, и cqw совпадают с шириной окна — масштаб как в оригинале. */
  container-type: inline-size;
}

.cw-floorgrid__field {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #fff;
  color: #000;
  cursor: pointer;
}

.cw-floorgrid__field:nth-of-type(2),
.cw-floorgrid__field:nth-of-type(4) { border-left: 1px solid #000; }
.cw-floorgrid__field:nth-of-type(n + 3) { border-top: 1px solid #000; }

.cw-floorgrid__label {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.cw-floorgrid__labeltext {
  max-width: 100%;
  font-size: clamp(26px, 4.4cqw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.06em;
  overflow-wrap: break-word;
}

.cw-floorgrid__field--architecture .cw-floorgrid__labeltext { max-width: 64%; }
.cw-floorgrid__field--business .cw-floorgrid__labeltext { max-width: 77%; }
.cw-floorgrid__field--lifestyle .cw-floorgrid__labeltext { max-width: 76%; }

.cw-floorgrid__list {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px;
}

.cw-floorgrid__item {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: clamp(24px, 3.3cqw, 48px);
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

/* Заявленный арендатор без раздела: приглушён, без подчёркивания, не кликабелен */
.cw-floorgrid__item--static {
  cursor: default;
  opacity: 0.55;
}

.cw-floorgrid__item:not(.cw-floorgrid__item--static):hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Инверсия выбранного поля: заголовок скрыт, показан список арендаторов */
.cw-floorgrid__field.is-active { background: #000; color: #fff; }
.cw-floorgrid__field.is-active .cw-floorgrid__label { display: none; }
.cw-floorgrid__field.is-active .cw-floorgrid__list { display: flex; }

.cw-floorgrid__plus {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 700px) {
  .cw-floorgrid { min-height: 420px; }
  .cw-floorgrid__label { padding: 22px; }

  .cw-floorgrid__labeltext,
  .cw-floorgrid__field--architecture .cw-floorgrid__labeltext,
  .cw-floorgrid__field--business .cw-floorgrid__labeltext,
  .cw-floorgrid__field--lifestyle .cw-floorgrid__labeltext {
    max-width: 86%;
    font-size: clamp(19px, 6vw, 30px);
  }

  .cw-floorgrid__list { padding: 22px; }

  .cw-floorgrid__item {
    font-size: clamp(21px, 5.5vw, 28px);
    line-height: 1.3;
  }
}


/* ---------- страница планировщика ----------

   Высота — забота страницы, а не продукта: планировщик заполняет контейнер.
   Так один и тот же код одинаково живёт и здесь, и на чужом сайте. */

#planner-host {
  display: flex;
  flex-direction: column;
  height: clamp(460px, calc(100vh - 300px), 760px);
  border: 1px solid var(--cw-neutral-400);
  border-radius: var(--cw-radius-large);
  overflow: hidden;
  background: var(--cw-neutral-000);
  box-shadow: var(--cw-shadow-2);
}

#planner-host > .pl {
  border: 0;
  border-radius: inherit;
}

@media (max-width: 900px) {
  #planner-host {
    height: auto;
    min-height: 520px;
  }
}

/* ---------- страница симулятора ----------

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

.cw-sim__shell {
  display: flex;
  flex-direction: column;
  gap: var(--cw-space-m);
}

.cw-sim__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cw-space-l);
  padding: var(--cw-space-m) var(--cw-space-l);
  border: 1px solid var(--cw-neutral-400);
  border-radius: var(--cw-radius-large);
  background: var(--cw-neutral-050);
  font-size: var(--cw-text-body-1);
  line-height: var(--cw-leading-body-1);
  color: var(--cw-neutral-700);
}

.cw-sim__status[hidden] {
  display: none;
}

.cw-sim__status--error {
  border-color: #f0b4b4;
  background: var(--cw-danger-bg);
  color: var(--cw-danger-fg);
}

.cw-sim__status-text {
  margin: 0;
  min-width: 0;
}

.cw-sim__retry {
  flex: 0 0 auto;
  font: 600 13px/1 var(--cw-font-body);
  color: var(--cw-neutral-900);
  background: var(--cw-neutral-000);
  border: 1px solid var(--cw-neutral-500);
  border-radius: var(--cw-radius-large);
  padding: 7px 12px;
  cursor: pointer;
}

.cw-sim__retry:hover {
  border-color: var(--cw-brand-500);
  color: var(--cw-brand-600);
}

.cw-sim__retry:focus-visible {
  outline: 2px solid var(--cw-info-fill);
  outline-offset: 2px;
}

#simulator-host {
  display: flex;
  flex-direction: column;
  height: clamp(480px, calc(100vh - 200px), 920px);
  border: 1px solid var(--cw-neutral-400);
  border-radius: var(--cw-radius-large);
  overflow: hidden;
  background: var(--cw-neutral-000);
  box-shadow: var(--cw-shadow-2);
}

#simulator-host > .sim {
  border: 0;
  border-radius: inherit;
}

/* Пока модуль не смонтирован (идёт загрузка или она сорвалась), пустой
   контейнер не должен выглядеть как готовая рабочая область: рамка и высота
   появляются вместе с каркасом. */
#simulator-host:empty {
  display: none;
}

@media (max-width: 900px) {
  /* На узком экране панели идут столбиком: фиксированная высота оставила бы
     под строкой состояния пустое поле, поэтому каркас подстраивается под
     содержимое. */
  #simulator-host {
    height: auto;
    min-height: 0;
  }
}

/* ---------- печать ----------

   На листе — только продукт: меню, шапка, подвал и служебные панели не печатаются.
   Распечатку плана несут подрядчику, и там нужен чертёж, а не навигация. */

@media print {
  .cw-sidebar,
  .cw-topbar,
  .cw-footer,
  .cw-pageintro,
  .cw-board__actions,
  .cw-board__keys,
  .cw-stage__result,
  .cw-search {
    display: none !important;
  }

  .cw-app,
  .cw-main,
  .cw-content {
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }

  #planner-host,
  .cw-board__host {
    height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body {
    background: #fff !important;
  }
}

/* ===== Гигакарта (gigamap) — инструмент системного картирования ===== */
.gm { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 520px; border: 1px solid #e3e8ef; border-radius: 14px; overflow: hidden; background: #fff; }
.gm__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid #e3e8ef; background: #f8fafc; }
.gm__group { display: flex; align-items: center; gap: 6px; padding: 2px; border-radius: 10px; background: #eef2f7; }
.gm__group--plain { background: transparent; }
.gm__lbl { font-size: 12px; color: #5b6573; margin-right: 2px; }
.gm__btn { font: 600 13px/1 system-ui, sans-serif; color: #1f2937; background: #fff; border: 1px solid #cfd6e2; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.gm__btn:hover { border-color: #16a34a; color: #15803d; }
.gm__btn.is-on { background: #16a34a; border-color: #16a34a; color: #fff; }
.gm__btn--danger { color: #dc2626; border-color: #f0b4b4; }
.gm__btn--danger:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.gm__chip { font: 600 12px/1 system-ui, sans-serif; color: var(--c, #64748b); background: #fff; border: 1px solid var(--c, #64748b); border-radius: 999px; padding: 5px 10px; cursor: pointer; opacity: .65; }
.gm__chip.is-on { opacity: 1; background: var(--c, #64748b); color: #fff; }
.gm__spacer { flex: 1 1 auto; }
.gm__status { font-size: 12px; color: #6b7280; }
.gm__stage { flex: 1 1 auto; overflow: auto; background: #fbfcfe; background-image: linear-gradient(#eef1f6 1px, transparent 1px), linear-gradient(90deg, #eef1f6 1px, transparent 1px); background-size: 28px 28px; }
.gm__canvas { min-width: 1680px; }
.gm__svg { display: block; }
.gm__side { width: 280px; border-left: 1px solid #e3e8ef; background: #f8fafc; padding: 14px; overflow: auto; }
.gm__sidehead { font: 700 14px/1.2 system-ui, sans-serif; color: #111827; margin-bottom: 10px; }
.gm__sidebody { font-size: 13px; color: #374151; }
.gm__field { display: block; margin-bottom: 12px; font-size: 12px; color: #5b6573; }
.gm__field textarea, .gm__field select, .gm__field input[type=color] { display: block; width: 100%; margin-top: 4px; font: 400 13px/1.4 system-ui, sans-serif; border: 1px solid #cfd6e2; border-radius: 8px; padding: 6px 8px; background: #fff; }
.gm__field input[type=color] { height: 34px; padding: 2px; }
.gm__hint { font-size: 12px; color: #6b7280; margin: 6px 0; }
.gm__relsel { font-weight: 600; color: #1f2937; margin: 4px 0 12px; padding: 8px; background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; }
.gm__edit { position: fixed; z-index: 60; font: 600 13px/1.3 system-ui, sans-serif; border: 2px solid #16a34a; border-radius: 10px; padding: 8px; resize: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.gm__node rect { transition: stroke .12s; }