/* ============================================
   Interactions page — FigJam-style board
   ============================================ */

/* --- Board shell --- */
.board {
  position: relative;
  width: 100%;
  height: clamp(30rem, calc(100dvh - 12rem), 60rem);
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  background: var(--color-board-bg);
  isolation: isolate;
  z-index: 95; /* above the page's top/bottom blur bands */
}

.board__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  outline: none;
  background-color: var(--color-board-bg);
  background-image: radial-gradient(circle at 1px 1px, var(--color-board-dot) 1px, transparent 1.6px);
  background-size: var(--grid, 24px) var(--grid, 24px);
  background-position: var(--grid-x, 0) var(--grid-y, 0);
  -webkit-user-select: none;
  user-select: none;
}

.board__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-text-primary);
}

.board__world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  opacity: 0;
}

.board.is-ready .board__world {
  opacity: 1;
  transition: opacity 0.4s var(--ease-standard);
}

.board.is-dragging .board__world { will-change: transform; }

/* --- Chrome: title + toolbar --- */
.board__title {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-nav-bg);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.board__toolbar {
  position: absolute;
  left: 50%;
  bottom: var(--space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - var(--space-3) * 2);
  padding: 5px;
  transform: translateX(-50%);
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--color-nav-bg);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  box-shadow: 0 6px 24px var(--color-board-frame-shadow);
}

.board__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-standard);
}

.board__tool:hover { background: var(--color-surface-work-card-hover-stroke); }
.board__tool:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 1px; }

.board__tool svg { width: 1rem; height: 1rem; }

.board__toolbar::-webkit-scrollbar { display: none; }
.board__tool { flex: none; }

.board__jump {
  display: flex;
  align-items: center;
  gap: 2px;
}

.board__jump[hidden] { display: none; }

.board__tool--jump.is-current {
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.board__tool--jump.is-current:hover { background: var(--color-surface-dark-hover); }

.board__zoom-label {
  min-width: 3.25rem;
  padding: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.board__divider {
  width: 1px;
  height: 1.25rem;
  margin: 0 2px;
  background: var(--color-border);
}

/* ============================================
   World content (all sizes in canvas pixels)
   ============================================ */
.board__item { position: absolute; }

.board-section {
  border: 2px solid var(--color-board-section-border);
  border-radius: 0;
  background: var(--color-board-section);
}

.board-section__name {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 0;
  border-radius: 0;
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: 22px;
  letter-spacing: var(--tracking);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-standard), transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.board-section__name:hover { background: var(--color-surface-dark-hover); transform: translateY(-2px); }
.board-section__name:focus-visible { outline: 3px solid var(--color-text-primary); outline-offset: 3px; }

.board-section__index { opacity: 0.6; }

/* The main frame (Figma frame "1") */
.board-frame {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 64px;
  border-radius: 0;
  background: var(--color-board-frame);
  box-shadow: 0 1px 2px var(--color-board-frame-shadow), 0 24px 60px var(--color-board-frame-shadow);
  cursor: pointer;
}

.board-frame .status-avatar {
  --sa-cutout: var(--color-board-frame);
  width: 420px;
  cursor: pointer;
}

.board-frame .segmented {
  --seg-font: 21px;
  --seg-pad: 8px;
  --seg-gap: 8px;
  --seg-option-pad: 16px 22px;
  max-width: 100%;
}

/* Touch: until the board was tapped, swipes scroll the page instead of moving the board */
@media (pointer: coarse) {
  .board:not(.is-engaged) .board__viewport {
    touch-action: pan-y pinch-zoom;
  }
}

@media (max-width: 768px) {
  .board {
    height: 70dvh;
  }
}