/* Diagnostic layer only: never participates in layout or intercepts clicks. */
.layout-grid {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  user-select: none;
  background-image: linear-gradient(to bottom, rgb(95 105 110 / 35%) .5px, transparent .5px);
  background-size: 100% var(--layout-grid-step, 8px);
}

.layout-grid__columns {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), minmax(0, 1fr));
  gap: var(--grid-gap, 32px);
}

.layout-grid__columns > span {
  background: rgb(0 190 220 / 18%);
  border-inline: 1px solid rgb(0 160 190 / 35%);
}

@media (max-width: 650px) {
  .layout-grid__columns > span:nth-child(n + 5) { display: none; }
}

@media print {
  .layout-grid { display: none !important; }
}