/* Оболочка сайта вокруг доски — это стили страницы, а не компонента.
   Вынесены из board.css: доска должна встраиваться в чужой сайт, не принося
   с собой селекторы чужой оболочки. */

.cw-board__host {
  display: flex;
  flex-direction: column;
  height: clamp(440px, calc(100vh - 340px), 880px);
  border: 1px solid var(--bd-stroke);
  border-radius: var(--bd-radius-l);
  overflow: hidden;
  background: var(--bd-surface);
  box-shadow: var(--bd-shadow-2);
}

.cw-content.cw-content--wide { max-width: 1680px; }

.cw-board__host > .bd { border-radius: inherit; }

.cw-board__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cw-space-s);
  margin: var(--cw-space-l) 0 var(--cw-space-m);
}

.cw-board__btn {
  font-family: var(--cw-font-body);
  font-size: var(--cw-text-body-1);
  font-weight: 600;
  color: var(--cw-color-neutral-foreground-2);
  background: var(--cw-color-neutral-background-1);
  border: 1px solid var(--cw-color-neutral-stroke-1);
  border-radius: var(--cw-radius-circular);
  padding: var(--cw-space-s) var(--cw-space-l);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

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

.cw-board__btn:focus-visible {
  outline: 2px solid var(--cw-brand-500);
  outline-offset: 2px;
}

.cw-board__actions .cw-cta { padding: var(--cw-space-s) var(--cw-space-l); }

.cw-board__meta {
  font-size: var(--cw-text-caption-1);
  color: var(--cw-color-neutral-foreground-3);
}

.cw-board__keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cw-space-xs) var(--cw-space-l);
  margin: var(--cw-space-m) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--cw-text-caption-1);
  color: var(--cw-color-neutral-foreground-3);
}

.cw-board__keys li {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-space-xs);
}

.cw-board__keys kbd {
  font-family: var(--cw-font-mono);
  font-size: 11px;
  line-height: 1.4;
  background: var(--cw-color-neutral-background-3);
  border: 1px solid var(--cw-color-neutral-background-4);
  border-radius: var(--cw-radius-small);
  padding: 1px 5px;
  color: var(--cw-color-neutral-foreground-2);
}

@media (max-width: 900px) {
.cw-board__host { height: auto; }
.cw-board__host .bd { height: auto; }
}