/* Shared contract-driven shell lattice helpers.
 *
 * Consumers set --bb-shell-field-width-mm/height-mm from page-layout bounds
 * and --bb-slot-x/y/w/h-mm per authored slot. This helper turns those
 * contract values into positioned field geometry and mounted bord bodies.
 */

.dashbord-lattice-field {
  position: relative;
  width: calc(var(--bb-shell-field-width-mm, 306) * var(--bb-shell-mm-scale));
  height: calc(var(--bb-shell-field-height-mm, 306) * var(--bb-shell-mm-scale));
  margin: 0 auto;
  overflow: visible;
}

.dashbord-lattice-field .bord_slot {
  position: absolute;
  left: calc(var(--bb-slot-x-mm, 0) * var(--bb-shell-mm-scale));
  top: calc(var(--bb-slot-y-mm, 0) * var(--bb-shell-mm-scale));
  width: calc(var(--bb-slot-w-mm, 50) * var(--bb-shell-mm-scale));
  height: calc(var(--bb-slot-h-mm, 50) * var(--bb-shell-mm-scale));
  z-index: var(--bb-slot-z, 1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  overflow: visible;
}

.dashbord-lattice-field .bord_slot.bord--shell .bord_surface {
  overflow-y: auto;
}

.dashbord-lattice-field .bord_slot.bord--shell .bord_body {
  display: block;
  overflow-y: auto;
}

.dashbord-lattice-field .cell-binding-layer,
.page-shell .cell-binding-layer,
.bb-composition-fit-wrap .cell-binding-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

.dashbord-lattice-field .cell-binding,
.page-shell .cell-binding,
.bb-composition-fit-wrap .cell-binding {
  position: absolute;
  left: calc(var(--bb-binding-x-mm, 0) * var(--bb-shell-mm-scale));
  top: calc(var(--bb-binding-y-mm, 0) * var(--bb-shell-mm-scale));
  width: calc(var(--bb-binding-w-mm, var(--bb-shell-cell-mm)) * var(--bb-shell-mm-scale));
  height: calc(var(--bb-binding-h-mm, var(--bb-shell-cell-mm)) * var(--bb-shell-mm-scale));
  z-index: var(--bb-binding-z, 20);
  opacity: 1;
  transition: opacity 140ms ease;
  pointer-events: none;
}

.dashbord-lattice-field .cell-binding--interactive,
.page-shell .cell-binding--interactive,
.bb-composition-fit-wrap .cell-binding--interactive {
  pointer-events: auto;
  cursor: pointer;
}

.dashbord-lattice-field .cell-binding--inactive,
.page-shell .cell-binding--inactive,
.bb-composition-fit-wrap .cell-binding--inactive {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes cell-binding-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}