/* Конструктор: холст, плавающие панели, каркас правой панели. Цвета — только токены (--bld-* заданы в конце tokens.css). */

/* ============ Раскладка ============ */
.cl-bld { display: flex; width: 100%; height: 100%; min-width: 0; overflow: hidden; }
.cl-bld.is-resizing { cursor: ew-resize; user-select: none; }
.cl-bld.is-resizing .cl-bld__stage { pointer-events: none; }

.cl-bld__stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--bld-canvas);
  /* точка сетки 1×1 px в левом верхнем углу каждой клетки */
  background-image: conic-gradient(from 270deg at 1px 1px, var(--bld-grid-dot) 90deg, transparent 0);
  background-size: 10px 10px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.cl-bld__stage.is-panning, .cl-bld__stage.is-panning * { cursor: grabbing !important; }
.cl-bld__stage.is-pasting, .cl-bld__stage.is-banding { cursor: crosshair; }
.cl-bld__stage.is-pasting .cl-bld-block, .cl-bld__stage.is-pasting .cl-bld-edge { cursor: crosshair; }

.cl-bld-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.cl-bld-svg text { font-family: var(--font-family); }
/* Масштаб 30 % и мельче: буквы ниже 4 px нечитаемы — их не рисуем, чтобы лист в сотни блоков двигался плавно */
.cl-bld-svg.is-far text, .cl-bld-svg.is-far .cl-bld-block__mark { display: none; }

/* Поверх холста в координатах окна: панель действий, значки группы, рамка выделения, подсказки */
.cl-bld-hud { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cl-bld-hud > * { position: absolute; top: 0; left: 0; pointer-events: auto; }

/* ============ Блок ============ */
.cl-bld-block {
  --fill: var(--bld-block-state-fill);
  --stroke: var(--bld-block-state-stroke);
  --ink: var(--text-primary);
  --ink-muted: var(--text-placeholder);
  --handle: var(--stroke);
  cursor: grab;
}
.cl-bld-block--state { --fill: var(--bld-block-state-fill); --stroke: var(--bld-block-state-stroke); --handle: var(--grey-600); }
.cl-bld-block--start { --fill: var(--bld-block-start-fill); --stroke: var(--bld-block-start-stroke); --ink: var(--text-white); --ink-muted: var(--bld-block-ink-muted); --handle: var(--bld-block-condition-stroke); }
.cl-bld-block--condition { --fill: var(--bld-block-condition-fill); --stroke: var(--bld-block-condition-stroke); --ink: var(--text-white); --ink-muted: var(--bld-block-ink-muted); --handle: var(--bld-block-condition-stroke); }
.cl-bld-block--side { --fill: var(--bld-block-side-fill); --stroke: var(--bld-block-side-stroke); --ink: var(--text-white); --ink-muted: var(--bld-block-ink-muted); --handle: var(--bld-block-side-stroke); }
.cl-bld-block--nostate { --fill: var(--bld-block-nostate-fill); --stroke: var(--bld-block-nostate-stroke); --ink: var(--text-white); --ink-muted: var(--bld-block-ink-muted); --handle: var(--bld-block-nostate-stroke); }

.cl-bld-block__body {
  fill: var(--fill);
  stroke: var(--stroke);
  stroke-width: 1;
  filter: drop-shadow(var(--bld-block-shadow));
}
.cl-bld-block:hover .cl-bld-block__body { filter: drop-shadow(var(--bld-block-shadow-hover)); }
.cl-bld-block.is-selected .cl-bld-block__body { stroke: var(--brand-500); stroke-width: 2; filter: drop-shadow(var(--bld-block-shadow-selected)); }
/* Когда в окне сотни блоков, тени не рисуются: на таком масштабе их не видно, а кадр они замедляют */
.cl-bld-svg.is-lite .cl-bld-block__body, .cl-bld__stage.is-panning .cl-bld-block__body, .cl-bld__stage.is-dragging .cl-bld-block__body { filter: none; }

.cl-bld-block__text {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.cl-bld-block__count {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  fill: var(--ink);
  text-anchor: end;
  dominant-baseline: central;
  pointer-events: none;
}
.cl-bld-block.is-empty .cl-bld-block__text, .cl-bld-block.is-empty .cl-bld-block__count { fill: var(--ink-muted); }
.cl-bld-block__mark { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Отметка «пишет в Google Таблицу»: зелёная плашка со значком таблицы на углу блока, с белой каймой — видна на блоке
   любого цвета; на мелком масштабе остаётся зелёной точкой */
.cl-bld-block__gs { cursor: help; }
.cl-bld-block__gs-body { fill: var(--bld-gsheet-fill); stroke: var(--bld-gsheet-ring); stroke-width: 1.5; }
.cl-bld-block__gs-icon { fill: none; stroke: var(--bld-gsheet-ring); stroke-width: 1.1; stroke-linejoin: round; pointer-events: none; }
.cl-bld-svg.is-far .cl-bld-block__gs-icon { display: none; }
.cl-bld-block.is-multi { cursor: move; }

/* Комментарий: просто текст на холсте; не подсвечивается ни при наведении, ни при выделении */
.cl-bld-block--comment .cl-bld-block__body,
.cl-bld-block--comment:hover .cl-bld-block__body { fill: transparent; stroke: none; filter: none; }
.cl-bld-block--comment .cl-bld-block__text { text-anchor: start; fill: var(--text-primary); }
.cl-bld-block--comment.is-empty .cl-bld-block__text { fill: var(--text-placeholder); }

/* Ручка стрелки: кружок на кромке, размер на экране не зависит от масштаба (радиус задаёт скрипт) */
.cl-bld-block__handle {
  fill: var(--white);
  stroke: var(--handle);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: grabbing;
}
.cl-bld-block.is-selected .cl-bld-block__handle { stroke: var(--brand-500); }

.cl-bld-ghost-line { fill: none; stroke: var(--bld-edge); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.cl-bld-ghost-block { fill: var(--fill); stroke: var(--stroke); stroke-width: 1; opacity: .7; pointer-events: none; }

/* ============ Стрелка ============ */
.cl-bld-edge { cursor: pointer; }
/* Зона захвата 10 px не рисуется вовсе (stroke: none), но мышь её чувствует */
.cl-bld-edge__hit { fill: none; stroke: none; stroke-width: 10; pointer-events: stroke; }
.cl-bld-edge__line { fill: none; stroke: var(--bld-edge); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cl-bld-edge__head { fill: var(--bld-edge); stroke: none; pointer-events: none; }
.cl-bld-edge__head--input { fill: var(--white); stroke: var(--bld-edge); stroke-width: 1.2; stroke-linejoin: round; }
.cl-bld-edge.is-active .cl-bld-edge__line { stroke: var(--brand-500); stroke-width: 2; filter: drop-shadow(0 0 10px var(--bld-edge-glow)); }
.cl-bld-edge.is-active .cl-bld-edge__head { fill: var(--brand-500); }
.cl-bld-edge.is-active .cl-bld-edge__head--input { fill: var(--white); stroke: var(--brand-500); }

.cl-bld-elabel { cursor: pointer; }
.cl-bld-elabel rect { fill: var(--grey-100); }
.cl-bld-elabel text { font-size: 11px; font-weight: var(--font-weight-regular); fill: var(--text-primary); text-anchor: middle; dominant-baseline: central; pointer-events: none; }

/* Связующий блок листов */
.cl-bld-link { cursor: grab; }
.cl-bld-link__body { fill: var(--grey-100); stroke: var(--grey-300); stroke-width: 1; }
.cl-bld-link.is-active .cl-bld-link__body { stroke: var(--brand-500); stroke-width: 2; }
.cl-bld-link__icon { fill: none; stroke: var(--bld-tool); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cl-bld-link__text { font-size: 11px; fill: var(--text-secondary); pointer-events: none; }

/* Инструменты стрелки при наведении */
.cl-bld-etool { cursor: grab; }
.cl-bld-etool--start { fill: var(--white); stroke: var(--grey-400); stroke-width: 1.5; }
.cl-bld-etool--end, .cl-bld-etool--vertex, .cl-bld-etool--segment { fill: var(--bld-tool); stroke: var(--white); stroke-width: 2; stroke-linejoin: round; }
.cl-bld-etool--vertex, .cl-bld-etool--segment { cursor: move; }
.cl-bld-etool--button { cursor: pointer; color: var(--white); }
.cl-bld-etool--button rect { fill: var(--bld-tool-dark); }
.cl-bld-etool--button .cl-icon { pointer-events: none; overflow: visible; }

/* ============ Выделение нескольких блоков ============ */
.cl-bld-band {
  border: 2px solid var(--bld-group);
  background: color-mix(in srgb, var(--bld-band) 30%, transparent);
  pointer-events: none;
}
.cl-bld-group {
  fill: none;
  stroke: var(--bld-group);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  filter: drop-shadow(2px 2px 5px var(--bld-group-shadow));
}
.cl-bld-group__btn { display: grid; place-items: center; width: 20px; height: 20px; color: var(--bld-tool); }
.cl-bld-group__btn:hover { color: var(--text-primary); }

/* ============ Панель действий над блоком ============ */
.cl-bld-actions { --size: 28px; display: flex; height: var(--size); }
.cl-bld-actions__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border: 1px solid var(--bld-tool-dark-border);
  background: var(--bld-tool-dark);
  color: var(--white);
  touch-action: none;
}
.cl-bld-actions__btn:first-child { border-top-left-radius: var(--radius-6); border-bottom-left-radius: var(--radius-6); }
.cl-bld-actions__btn:last-child { border-top-right-radius: var(--radius-6); border-bottom-right-radius: var(--radius-6); }
.cl-bld-actions__btn:hover { background: var(--grey-700); }
.cl-bld-actions__btn .cl-icon { width: 64%; height: 64%; pointer-events: none; }

/* Подсказка у элемента холста: слева от ручки стрелки; «пилюля» под значком группы */
.cl-bld-tip {
  z-index: 5;
  max-width: 320px;
  padding: 8px 16px;
  border-radius: var(--radius-6);
  background: var(--background-tooltip);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 19px;
  color: var(--text-white);
  pointer-events: none;
}
.cl-bld-tip--left { width: max-content; }
.cl-bld-tip--bottom, .cl-bld-tip--top { width: max-content; max-width: 480px; padding: 5px 16px; border-radius: 20px; font-weight: var(--font-weight-regular); }

/* ============ Кнопки сверху справа ============ */
.cl-bld-top { position: absolute; top: 13px; right: 10px; z-index: 97; display: flex; gap: 8px; }
.cl-bld-topbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-6);
  background: var(--white);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background var(--duration-button);
}
.cl-bld-topbtn:hover { background: var(--grey-100); }
.cl-bld-topbtn--icon { width: 34px; padding: 0; color: var(--grey-500); }

/* ============ Панель слева внизу ============ */
.cl-bld-tools {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 97;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 250px;
  padding: 6px;
  border-radius: var(--radius-12);
  background: var(--white);
  box-shadow: var(--shadow-dropdown);
  cursor: default;
}
.cl-bld-tools__row { display: flex; align-items: center; height: 28px; }
.cl-bld-tools__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-6);
  color: var(--grey-500);
  transition: background var(--duration-button), color var(--duration-button);
}
.cl-bld-tools__btn:hover:not(:disabled) { background: var(--grey-100); }
.cl-bld-tools__btn[data-tip]:hover:not(:disabled) { color: var(--brand-500); }
.cl-bld-tools__btn:disabled { color: var(--grey-300); cursor: default; }
.cl-bld-tools__btn--map { margin-left: auto; }
.cl-bld-tools__btn--map.is-active, .cl-bld-tools__btn--map.is-active:hover { background: var(--brand-100); color: var(--brand-500); }
.cl-bld-tools__sep { flex: none; width: 1px; height: 16px; margin: 0 6px; background: var(--grey-200); }
.cl-bld-tools__zoom {
  min-width: 42px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cl-bld-tools__test {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  border-radius: var(--radius-6);
  background: var(--brand-500);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--text-white);
  cursor: pointer;
  transition: background var(--duration-button);
}
.cl-bld-tools__test:hover { background: var(--brand-480); }
.cl-bld-tools__play { flex: none; fill: currentColor; stroke: none; }

/* Карта */
.cl-bld-tools__map { position: relative; width: 238px; height: 172px; overflow: hidden; border-radius: var(--radius-8); background: var(--grey-60); }
.cl-bld-map__canvas { display: block; width: 238px; height: 172px; cursor: pointer; }
.cl-bld-map__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid var(--brand-500);
  border-radius: var(--radius-4);
  background: var(--brand-alpha-10);
  cursor: grab;
  touch-action: none;
}
.cl-bld-map__frame:active { cursor: grabbing; }
.cl-bld-map__knob {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--brand-500);
  border-radius: 50%;
  background: var(--white);
  cursor: nwse-resize;
}

/* ============ Листы ============ */
.cl-bld-sheets { position: absolute; right: 12px; bottom: 18px; z-index: 97; display: flex; align-items: flex-end; gap: 6px; cursor: default; }
.cl-bld-sheets.is-open { z-index: 99; }
.cl-bld-sheets__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-6);
  background: var(--white);
  color: var(--grey-500);
  transition: background var(--duration-button);
}
.cl-bld-sheets__btn:hover { background: var(--grey-100); }
.cl-bld-sheets__dropdown { position: relative; width: 220px; }
.cl-bld-sheets__select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  height: 40px;
  padding: 0 14px 0 15px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-6);
  background: var(--white);
  box-shadow: var(--bld-sheets-shadow);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-primary);
  text-align: left;
}
.cl-bld-sheets.is-open .cl-bld-sheets__select { border-top-left-radius: 0; border-top-right-radius: 0; }
.cl-bld-sheets__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-bld-sheets__caret { width: 12px; height: 10px; color: var(--grey-500); transition: transform var(--duration-button); }
.cl-bld-sheets.is-open .cl-bld-sheets__caret { transform: rotate(180deg); }
.cl-bld-sheets__list {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: flex;
  flex-direction: column;
  width: 220px;
  max-height: 240px;
  overflow: hidden;
  border: 1px solid var(--border-primary-default);
  border-bottom: 0;
  border-radius: var(--radius-6) var(--radius-6) 0 0;
  background: var(--white);
}
.cl-bld-sheets__search { position: relative; flex: none; width: 218px; height: 40px; border-bottom: 1px solid var(--border-tertiary-default); }
.cl-bld-sheets__search-input { width: 100%; height: 100%; padding: 0 40px 0 15px; border: 0; background: transparent; font-size: 14px; color: var(--text-primary); }
.cl-bld-sheets__search .cl-icon { position: absolute; top: 11px; right: 12px; color: var(--grey-500); pointer-events: none; }
.cl-bld-sheets__rows { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.cl-bld-sheets__row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-height: 31px;
  padding: 5px 6px 5px 15px;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
  cursor: pointer;
}
.cl-bld-sheets__row:hover, .cl-bld-sheets__row:focus-visible { background: var(--grey-100); }
.cl-bld-sheets__row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* При наведении длинное название разворачивается в несколько строк */
.cl-bld-sheets__row:hover .cl-bld-sheets__row-name { white-space: normal; overflow-wrap: anywhere; }
.cl-bld-sheets__star { flex: none; width: 24px; height: 24px; margin: -1.5px 0; color: var(--grey-400); opacity: 0; transition: color var(--duration-button); }
.cl-bld-sheets__row:hover .cl-bld-sheets__star, .cl-bld-sheets__star:focus-visible, .cl-bld-sheets__star.is-on { opacity: 1; }
.cl-bld-sheets__star:hover, .cl-bld-sheets__star.is-on { color: var(--w-star); }

/* Окна «Создание листа» и «Редактирование листа»: 460 px, поле 412 */
.cl-modal.cl-wdlg.cl-bld-sheetdlg { max-width: 460px; }
.cl-bld-sheetdlg .cl-modal__body { padding: 20px 24px; }
.cl-bld-sheetdlg .cl-modal__footer { padding: 14px 24px; }
.cl-bld-sheetdlg__main { min-width: 150px; }
.cl-bld-sheetdlg__delete { min-width: 125px; }

/* ============ Меню создания блока ============ */
.cl-bld-kindmenu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border: 1px solid var(--brand-light);
  border-radius: var(--radius-6);
  background: var(--white);
  box-shadow: var(--shadow-dropdown);
}
.cl-bld-kindmenu__item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
}
.cl-bld-kindmenu__item:hover, .cl-bld-kindmenu__item:focus-visible { background: var(--grey-100); }
.cl-bld-kindmenu__label { flex: 1 1 auto; }
.cl-bld-kindmenu__help { display: inline-flex; margin-left: 8px; color: var(--grey-400); }

/* ============ Плашка-инструкция ============ */
.cl-bld-notice {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  width: max-content;
  min-width: 300px;
  max-width: max(300px, 30vw);
  padding: 12px 40px 12px 16px;
  border-radius: var(--radius-5);
  background: var(--brand-500);
  box-shadow: var(--shadow-dropdown);
  color: var(--text-white);
  opacity: 0;
  transition: opacity var(--duration-toast) ease-in-out;
}
.cl-bld-notice.is-open { opacity: 1; }
.cl-bld-notice--danger { background: var(--red-600); }
.cl-bld-notice__title { font-size: 16px; font-weight: var(--font-weight-semibold); line-height: 22px; }
.cl-bld-notice__text { margin-top: 4px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.cl-bld-notice__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-4); color: var(--text-white); opacity: .8; }
.cl-bld-notice__close:hover { opacity: 1; }

/* ============ Вопрос «Да / Нет» ============ */
.cl-bld-yesno { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--bld-yesno-overlay); }
.cl-bld-yesno__card {
  position: absolute;
  top: 40%;
  left: 50%;
  width: calc(100% - 40px);
  max-width: 600px;
  padding: 20px 16px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-6);
  background: var(--white);
  transform: translate(-50%, -50%);
}
.cl-bld-yesno__text { font-size: 16px; line-height: 24px; color: var(--text-caption); }
.cl-bld-yesno__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.cl-bld-yesno__actions .cl-btn { min-width: 80px; }

/* ============ Правая панель: каркас ============ */
.cl-bld-panel {
  position: relative;
  z-index: 98;
  display: flex;
  flex: none;
  width: 380px;
  height: 100%;
  border-left: 1px solid var(--border-primary-default);
  background: var(--white);
  box-shadow: var(--bld-panel-shadow);
}
/* Полоса захвата 14 px на левой кромке */
.cl-bld-panel__grip { position: absolute; top: 0; bottom: 0; left: -7px; z-index: 2; width: 14px; cursor: ew-resize; touch-action: none; }
.cl-bld-panel__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; height: 100%; }
/* Части формы: шапка, прокручиваемое тело, закреплённая полоса кнопок сохранения */
.cl-bld-panel__head { display: flex; align-items: center; flex: none; gap: 8px; min-height: 56px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border-primary-default); }
.cl-bld-panel__title { min-width: 0; overflow: hidden; font-size: 16px; font-weight: var(--font-weight-medium); line-height: 24px; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.cl-bld-panel__content { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-x: hidden; overflow-y: auto; }
.cl-bld-panel__foot { display: flex; flex: none; gap: 10px; height: 60px; padding: 10px 12px; background: var(--white); box-shadow: var(--bld-panel-foot-shadow); }