/* ========================================================= DEV GRID OVERLAY (matches .p-grid exactly) Usage: ========================================================= */ :root { --dev-grid-fill: rgba(0, 200, 255, 0.18); /* like XD cyan */ --dev-grid-line: rgba(0, 200, 255, 0.25); --dev-grid-gap: var(--grid-gap); } body.dev-grid .p-grid { position: relative; } /* 12 column blocks (with real gap) */ body.dev-grid .p-grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 999; /* compute the same column width as the grid */ --gap: var(--dev-grid-gap); --cols: var(--grid-cols); --col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); background: repeating-linear-gradient(90deg, var(--dev-grid-fill) 0, var(--dev-grid-fill) var(--col), transparent var(--col), transparent calc(var(--col) + var(--gap))); } /* optional: add column edge lines (toggle with body.dev-grid-lines) */ body.dev-grid-lines .p-grid::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1000; --gap: var(--dev-grid-gap); --cols: var(--grid-cols); --col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); --step: calc(var(--col) + var(--gap)); background: repeating-linear-gradient(90deg, var(--dev-grid-line) 0, var(--dev-grid-line) 1px, transparent 1px, transparent var(--step)); }