/* Проектная доска Экосистемы — компонент, а не страница.

   Правила этого файла действуют только внутри .bd: токены объявлены на самом
   компоненте, поэтому подключение к чужому сайту ничего у него не перебивает.
   Стили оболочки сайта (.cw-board__*) живут в styles/board-shell.css. */

.bd {
  --bd-brand: var(--cw-color-brand-background, #2e6b4e);
  --bd-brand-600: var(--cw-color-brand-background-hover, #245741);
  --bd-brand-tint: var(--cw-brand-tint-40, #edf5f0);
  --bd-accent: var(--cw-accent-500, #f5a623);
  --bd-accent-tint: var(--cw-accent-tint, #fdf4e3);
  --bd-accent-stroke: var(--cw-accent-stroke, #efdfb8);
  --bd-accent-deep: var(--cw-accent-deep, #8a5e00);

  --bd-bg: var(--cw-body-bg, #f7f7f7);
  --bd-surface: var(--cw-color-neutral-background-1, #ffffff);
  --bd-ink: var(--cw-color-neutral-foreground-1, #242424);
  --bd-ink-2: var(--cw-color-neutral-foreground-3, #616161);
  /* Служебный серый: подписи кадров, линии связи, маркер стрелки. */
  --bd-ink-3: #8a8a8a;
  --bd-stroke: var(--cw-neutral-400, #e0e0e0);
  --bd-stroke-soft: var(--cw-neutral-300, #ebebeb);

  --bd-radius-s: 4px;
  --bd-radius-m: 6px;
  --bd-radius-l: 12px;
  --bd-radius-pill: 9999px;

  --bd-shadow-1: 0 1px 2px rgb(0 0 0 / 6%);
  --bd-shadow-2: 0 1px 4px rgb(0 0 0 / 7%);
  --bd-shadow-3: 0 8px 24px rgb(0 0 0 / 10%);

  --bd-font: var(--cw-body-font, "Segoe UI", system-ui, sans-serif);
}

.bd {
  display: grid;
  /* Три строки, а не две: в доске первыми идут строка документа, панель
     инструментов и только потом полотно. Пока строк было две, свободную
     долю (1fr) забирала панель инструментов — она растягивалась на 299 px
     пустоты, а полотну досталось 174 px по высоте содержимого. */
  grid-template-rows: auto auto minmax(0, 1fr);
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  background: var(--bd-surface);
}

.bd__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bd-stroke-soft);
  background: var(--bd-surface);
  flex-wrap: wrap;
}

.bd__group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-m);
  background: var(--bd-surface);
}

.bd__group--plain { border: 0; padding: 0; }

.bd__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--bd-ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  padding: 7px 10px;
  border-radius: var(--bd-radius-s);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bd__btn:hover { background: var(--bd-brand-tint); color: var(--bd-brand-600); }

.bd__btn:focus-visible { outline: 2px solid var(--bd-brand); outline-offset: 1px; }

.bd__btn[aria-pressed="true"] { background: var(--bd-brand); color: #fff; }

.bd__btn[aria-pressed="true"]:hover { background: var(--bd-brand-600); color: #fff; }

.bd__btn[disabled] { opacity: 0.38; cursor: default; background: transparent; color: var(--bd-ink-3); }

.bd__btn--icon { padding: 7px 8px; }

.bd__btn svg { width: 14px; height: 14px; display: block; }

.bd__spacer { flex: 1 1 auto; }

.bd__status {
  font-size: 11.5px;
  color: var(--bd-ink-3);
  padding: 0 6px;
  white-space: nowrap;
}

.bd__status[data-state="saved"] { color: var(--bd-brand); }

.bd__status[data-state="dirty"] { color: var(--bd-accent-deep); }

.bd__body {
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 0;
  position: relative;
}

.bd__canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bd-surface);
  touch-action: none;
  cursor: default;
}

.bd__canvas[data-mode="pan"] { cursor: grab; }

.bd__canvas[data-mode="pan"][data-panning="1"] { cursor: grabbing; }

.bd__canvas[data-mode="connect"] { cursor: crosshair; }

.bd__svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.bd-node { cursor: grab; }

.bd-node[data-locked="1"] { cursor: default; }

.bd-node__box { transition: stroke 0.12s ease, filter 0.12s ease; }

.bd-node[data-type="block"]:hover .bd-node__box,
.bd-node[data-type="note"]:hover .bd-node__box { stroke: var(--bd-brand); }

.bd-node[data-selected="1"] .bd-node__box {
  stroke: var(--bd-brand);
  stroke-width: 2;
}

.bd-node[data-selected="1"] .bd-node__halo { display: block; }

.bd-node__halo { display: none; fill: none; stroke: var(--bd-brand); stroke-opacity: 0.22; stroke-width: 6; }

.bd-node__label { pointer-events: none; }

.bd-node__sub { pointer-events: none; }

.bd-port {
  fill: var(--bd-surface);
  stroke: var(--bd-brand);
  stroke-width: 1.5;
  cursor: crosshair;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.bd-port:hover { fill: var(--bd-brand); }

.bd-node:hover .bd-port,
.bd--connecting .bd-port { opacity: 1; }

.bd--readonly .bd-port { display: none; }

.bd-edge { fill: none; stroke: var(--bd-ink-3); stroke-width: 1.4; }

.bd-edge--selected { stroke: var(--bd-brand); stroke-width: 2; }

.bd-edge__hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }

.bd-edge__label {
  font-size: 11px;
  fill: var(--bd-ink-2);
  paint-order: stroke;
  stroke: var(--bd-surface);
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}

.bd-temp {
  fill: none;
  stroke: var(--bd-brand);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

.bd-marquee {
  fill: rgb(46 107 78 / 8%);
  stroke: var(--bd-brand);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.bd-handle {
  fill: var(--bd-surface);
  stroke: var(--bd-brand);
  stroke-width: 1.4;
}

.bd-handle[data-handle="nw"], .bd-handle[data-handle="se"] { cursor: nwse-resize; }

.bd-handle[data-handle="ne"], .bd-handle[data-handle="sw"] { cursor: nesw-resize; }

.bd-editor {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--bd-brand);
  border-radius: var(--bd-radius-s);
  background: var(--bd-surface);
  color: var(--bd-ink);
  font-family: var(--bd-font);
  line-height: 1.3;
  resize: none;
  outline: none;
  box-shadow: var(--bd-shadow-3);
  overflow: hidden;
}

.bd__side {
  width: 268px;
  border-left: 1px solid var(--bd-stroke-soft);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bd-surface);
}

.bd__side[hidden] { display: none; }

.bd__tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--bd-stroke-soft);
  flex: 0 0 auto;
}

.bd__tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bd-ink-3);
  padding: 7px 8px 8px;
  border-radius: var(--bd-radius-s) var(--bd-radius-s) 0 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.bd__tab:hover { color: var(--bd-ink); background: var(--bd-brand-tint); }

.bd__tab[aria-selected="true"] {
  color: var(--bd-brand-600);
  border-bottom-color: var(--bd-brand);
  background: color-mix(in srgb, var(--bd-brand) 6%, transparent);
}

.bd__tab:focus-visible { outline: 2px solid var(--bd-brand); outline-offset: -2px; }

.bd__tabbody {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  gap: 8px;
}

.bd__tabbody[hidden] { display: none; }

.bd__frames-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 4px;
  border-bottom: 1px solid var(--bd-stroke-soft);
}

.bd__frames-title {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bd-ink-3);
  margin: 0;
}

.bd__frames-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.bd-frame {
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-m);
  padding: 7px 8px;
  cursor: pointer;
  background: var(--bd-surface);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px 16px;
  gap: 8px;
  align-items: start;
}

.bd-frame__body { min-width: 0; display: block; }

.bd-frame:hover { border-color: var(--bd-brand); background: var(--bd-brand-tint); }

.bd-frame[data-active="1"] { border-color: var(--bd-brand); background: var(--bd-brand-tint); }

.bd-frame__num {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bd-brand);
  background: var(--bd-surface);
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-pill);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.bd-frame__title {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--bd-ink);
  overflow-wrap: anywhere;
}

.bd-frame__meta { display: block; font-size: 10.5px; color: var(--bd-ink-3); margin-top: 2px; }

.bd-frame__del {
  border: 0;
  background: transparent;
  color: var(--bd-ink-3);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
}

.bd-frame__del:hover { color: #b42318; }

.bd-frame__exp {
  border: 0;
  background: transparent;
  color: var(--bd-ink-3);
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

.bd-frame__exp svg { width: 15px; height: 15px; display: block; }

.bd-frame__exp:hover { color: var(--bd-brand-600); }

.bd__modalsub {
  margin: 18px 0 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bd-ink-3);
  font-weight: 600;
}

.bd__entlist { list-style: none; margin: 8px 0 0; padding: 0; }

.bd__entrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd-stroke-soft);
}

.bd__entname { font-size: 13px; color: var(--bd-ink); }

.bd__entmeta { font-size: 12px; color: var(--bd-ink-3); text-align: right; }

.bd__entacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

.bd__frames-empty {
  font-size: 12px;
  color: var(--bd-ink-3);
  padding: 10px;
  line-height: 1.45;
}

.bd__hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 11px;
  color: var(--bd-ink-3);
  background: color-mix(in srgb, var(--bd-surface) 88%, transparent);
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-pill);
  padding: 4px 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bd__canvas:hover .bd__hint { opacity: 1; }

.bd__toast {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(8px);
  background: var(--bd-ink);
  color: #fff;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: var(--bd-radius-m);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 8;
  max-width: 80%;
}

.bd__toast[data-show="1"] { opacity: 1; transform: translateX(-50%) translateY(0); }

.bd__docbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bd-stroke-soft);
  background: color-mix(in srgb, var(--bd-brand) 3%, var(--bd-surface));
}

.bd__docrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bd__docrow--actions { gap: 6px; }

.bd__doctitle {
  flex: 1 1 220px;
  min-width: 140px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bd-ink);
  background: var(--bd-surface);
  border: 1px solid transparent;
  border-radius: var(--bd-radius-m);
  padding: 6px 8px;
}

.bd__doctitle:hover { border-color: var(--bd-stroke-soft); }

.bd__doctitle:focus { outline: none; border-color: var(--bd-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bd-brand) 18%, transparent); }

.bd__docfield {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--bd-ink-3);
}

.bd__docfield select {
  font: inherit;
  font-size: 12px;
  color: var(--bd-ink);
  background: var(--bd-surface);
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-s);
  padding: 5px 6px;
  max-width: 180px;
}

/* Привязка к проекту без списка проектов: читается как факт, а не как
   поле ввода — иначе выглядит как сломанный выпадающий список. */
.bd__docfield--static b {
  font-weight: 600;
  font-size: 12px;
  color: var(--bd-ink);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd__docplace {
  margin-left: auto;
  font-size: 11px;
  color: var(--bd-ink-3);
  white-space: nowrap;
}

.bd__chip {
  appearance: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bd-ink-2);
  background: var(--bd-surface);
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-pill);
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.bd__chip:hover { border-color: var(--bd-brand); color: var(--bd-brand-600); background: var(--bd-brand-tint); }

.bd__chip:focus-visible { outline: 2px solid var(--bd-brand); outline-offset: 1px; }

.bd__chip--accent { border-color: var(--bd-accent-stroke); background: var(--bd-accent-tint); color: var(--bd-accent-deep); }

.bd__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--bd-radius-pill);
  background: var(--bd-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.bd__stale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--bd-accent-deep);
  background: var(--bd-accent-tint);
  border: 1px solid var(--bd-accent-stroke);
  border-radius: var(--bd-radius-pill);
  padding: 3px 4px 3px 10px;
}

.bd__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--bd-ink-3);
}

.bd__field input,
.bd__field select {
  font: inherit;
  font-size: 12.5px;
  color: var(--bd-ink);
  background: var(--bd-surface);
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-s);
  padding: 5px 7px;
}

.bd__field input:focus,
.bd__field select:focus { outline: none; border-color: var(--bd-brand); }

.bd__hinttext {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bd-ink-3);
}

.bd__panelhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bd__panelnote { font-size: 11px; color: var(--bd-ink-3); }

.bd__mini {
  appearance: none;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--bd-ink-2);
  background: transparent;
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-s);
  padding: 3px 7px;
  cursor: pointer;
}

.bd__mini:hover { border-color: var(--bd-brand); color: var(--bd-brand-600); }

.bd__mini:disabled { opacity: 0.45; cursor: default; }

.bd__mini--danger:hover { border-color: #c0392b; color: #a93226; }

.bd__mini--quiet {
  padding: 3px 6px;
  border-color: transparent;
  color: var(--bd-ink-3);
  line-height: 1;
}

.bd__mini--quiet:hover { border-color: #c0392b; color: #a93226; background: transparent; }

.bd__widebtn {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--bd-ink-2);
  background: var(--bd-surface);
  border: 1px solid var(--bd-stroke);
  border-radius: var(--bd-radius-m);
  padding: 7px 10px;
  cursor: pointer;
  width: 100%;
}

.bd__widebtn:hover { border-color: var(--bd-brand); color: var(--bd-brand-600); background: var(--bd-brand-tint); }

.bd__widebtn--danger:hover { border-color: #c0392b; color: #a93226; background: #fbeceb; }

.bd__proprow { display: flex; gap: 6px; }

.bd__vlist, .bd__clist, .bd__liblist, .bd__plist, .bd__difflist, .bd__tplgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd__vrow, .bd__crow, .bd__librow, .bd__prow {
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-m);
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--bd-surface);
}

.bd__librow.is-current { border-color: var(--bd-brand); background: var(--bd-brand-tint); }

.bd__vmain, .bd__libmain, .bd__pmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.bd__vtime, .bd__libmeta, .bd__pmeta { font-size: 10.5px; color: var(--bd-ink-3); }

.bd__vlabel, .bd__libtitle, .bd__ptitle { font-size: 12px; font-weight: 600; color: var(--bd-ink); overflow-wrap: anywhere; }

.bd__vmeta { font-size: 10.5px; color: var(--bd-brand-600); }

.bd__vacts, .bd__libacts, .bd__pacts, .bd__cacts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

.bd__pstate { font-size: 10.5px; color: var(--bd-ink-3); margin-left: auto; }

.bd__chead { display: flex; justify-content: space-between; gap: 8px; }

.bd__cwhere { font-size: 11px; font-weight: 600; color: var(--bd-brand-600); }

.bd__ctime { font-size: 10.5px; color: var(--bd-ink-3); }

.bd__ctext { margin: 0; font-size: 12px; line-height: 1.45; color: var(--bd-ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.bd__cta, .bd__bigta {
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bd-ink);
  background: var(--bd-surface);
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-m);
  padding: 7px 8px;
  resize: vertical;
  width: 100%;
}

.bd__cta:focus, .bd__bigta:focus { outline: none; border-color: var(--bd-brand); }

.bd__bigta { min-height: 160px; }

.bd__mono { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }

.bd__modalhost { display: none; }

.bd__modalhost[data-open="1"] {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgb(20 20 20 / 38%);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bd { position: relative; }

.bd__modal {
  width: min(720px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bd-surface);
  border-radius: var(--bd-radius-l);
  box-shadow: var(--bd-shadow-3);
  overflow: hidden;
}

.bd__modalhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bd-stroke-soft);
}

.bd__modaltitle { margin: 0; font-size: 14px; font-weight: 700; color: var(--bd-ink); }

.bd__modalbody {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.bd__modalacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.bd__libbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.bd__libbar input {
  flex: 1 1 200px;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-m);
  color: var(--bd-ink);
  background: var(--bd-surface);
}

.bd__tplgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.bd__tplcard {
  border: 1px solid var(--bd-stroke-soft);
  border-radius: var(--bd-radius-m);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  background: var(--bd-surface);
}

.bd__tpltitle { font-size: 12.5px; font-weight: 600; color: var(--bd-ink); }

.bd__tplnote { font-size: 11px; line-height: 1.45; color: var(--bd-ink-3); flex: 1 1 auto; }

.bd__difflist { gap: 3px; }

.bd__diffrow {
  font-size: 12px;
  line-height: 1.45;
  padding: 4px 8px;
  border-radius: var(--bd-radius-s);
  border-left: 3px solid var(--bd-stroke);
  background: var(--bd-bg);
  overflow-wrap: anywhere;
}

.bd__diffrow[data-kind="add"] { border-left-color: #2e7d4f; background: #eef7f0; color: #1f4a36; }

.bd__diffrow[data-kind="remove"] { border-left-color: #b03a2e; background: #fbeceb; color: #8c2b22; }

.bd__diffrow[data-kind="change"] { border-left-color: var(--bd-accent); background: var(--bd-accent-tint); color: var(--bd-accent-deep); }

.bd__diffrow[data-kind="move"] { border-left-color: #bdbdbd; color: var(--bd-ink-2); }

.bd__filelabel {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bd-ink-2);
  border: 1px dashed var(--bd-stroke);
  border-radius: var(--bd-radius-pill);
  padding: 5px 12px;
  cursor: pointer;
}

.bd__filelabel:hover { border-color: var(--bd-brand); color: var(--bd-brand-600); }

.bd-node:focus { outline: none; }

.bd-node:focus-visible .bd-node__box,
.bd-node:focus-visible .bd-node__title {
  outline: none;
}

.bd-node:focus-visible .bd-node__box {
  stroke: var(--bd-brand);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 0 3px color-mix(in srgb, var(--bd-brand) 24%, transparent));
}

@media (max-width: 900px) {
.bd__body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.bd__canvas { min-height: 360px; }
.bd__side {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--bd-stroke-soft);
    max-height: 240px;
  }
.bd__bar { gap: 6px; }
.bd__btn { padding: 6px 8px; font-size: 12px; }
}

@media (max-width: 600px) {
.bd__bar { padding: 6px; }
.bd__status { display: none; }
}

.bd__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cw-space-xs, 4px);
  padding: var(--cw-space-xxl, 24px);
  text-align: center;
  pointer-events: none;
}

.bd__empty[hidden] { display: none; }

.bd__empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-ink);
}

.bd__empty-text {
  margin: 0;
  max-width: 420px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bd-ink-2);
}

/* Плашка перехватывает клики только там, где есть кнопки: иначе она
   перекрывала бы полотно под собой. */
.bd__empty-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  pointer-events: auto;
}

.bd__empty-acts .bd__btn {
  padding: 9px 14px;
  font-size: 13px;
  border: 1px solid var(--bd-stroke);
  background: var(--bd-surface);
}

.bd__empty-acts .bd__btn:hover {
  border-color: var(--bd-brand);
}

.bd__btn--accent {
  background: var(--bd-brand);
  border-color: var(--bd-brand);
  color: #fff;
}

.bd__empty-acts .bd__btn--accent,
.bd__empty-acts .bd__btn--accent:hover {
  background: var(--bd-brand);
  border-color: var(--bd-brand);
  color: #fff;
}

.bd__empty-acts .bd__btn--accent:hover { background: var(--bd-brand-600); }

.bd__empty-hint {
  margin: 6px 0 0;
  max-width: 420px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bd-ink-3);
}

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

   На листе должен быть лист: схема без панелей, вкладок и боковой колонки.
   Печать нужна тому, кто несёт распечатку на встречу. */

@media print {
  .bd {
    display: block;
    height: auto;
    min-height: 0;
    border: 0;
  }

  .bd__docbar,
  .bd__bar,
  .bd__side,
  .bd__tabs,
  .bd__toast,
  .bd__modal,
  .bd__empty {
    display: none !important;
  }

  .bd__body {
    display: block;
    height: auto;
  }

  .bd__canvas {
    height: 92vh;
    min-height: 0;
    border: 0;
  }

  .bd__svg {
    background: #fff;
  }
}