/* Inspection only. This layer never changes document geometry or receives input. */
.grid-guide {
  --guide-column: rgba(238, 65, 79, .075);
  --guide-column-line: rgba(220, 42, 60, .28);
  --guide-content-line: #168bde;
  --guide-axis: #9852d4;
  --guide-paper: rgba(255, 255, 255, .95);
  --guide-ink: #15232d;
  --guide-font: ui-monospace, SFMono-Regular, Menlo, monospace;
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none !important; overflow: clip;
  font: 10px / 1.5 var(--guide-font); color: var(--guide-ink);
  text-align: left; letter-spacing: 0; text-transform: none;
}
.grid-guide[hidden] { display: none !important; }
.grid-guide * { box-sizing: border-box; pointer-events: none !important; }
.grid-guide__column { position: absolute; top: 0; bottom: 0; background: var(--guide-column); border-inline: 1px solid var(--guide-column-line); }
.grid-guide__column > span { position: absolute; top: 28px; left: 3px; color: var(--guide-ink); background: var(--guide-paper); padding: 0 2px; }
.grid-guide__item { position: absolute; top: 0; left: 0; border: 1px solid var(--guide-content-line); }
.grid-guide__item > span { position: absolute; top: 0; left: 0; white-space: nowrap; padding: 1px 4px; color: var(--guide-content-line); background: var(--guide-paper); }
.grid-guide__line { position: absolute; top: 0; left: 0; }
.grid-guide__line[data-axis='y'] { width: 100%; border-top: 1px dashed var(--guide-axis); }
.grid-guide__line[data-axis='x'] { height: 100%; border-left: 1px dashed var(--guide-axis); }
.grid-guide__line > span { position: absolute; right: 8px; bottom: 2px; white-space: nowrap; background: var(--guide-paper); color: var(--guide-axis); padding: 0 3px; }
.grid-guide__line[data-axis='x'] > span { top: 50px; right: auto; bottom: auto; left: 2px; }
.grid-guide__legend { position: absolute; right: 12px; bottom: 12px; max-width: calc(100% - 24px); background: var(--guide-paper); color: var(--guide-ink); border: 1px solid var(--guide-column-line); padding: 8px 10px; overflow-wrap: anywhere; }
.grid-guide__legend strong { display: block; font-weight: inherit; font-size: 11px; }
.grid-guide__detail { margin-top: 2px; }

/* The default guide shows only column edges; detailed inspection is opt-in. */
.grid-guide[data-appearance='lines'] .grid-guide__column { background: none; border-inline-color: rgba(220, 42, 60, .35); }
.grid-guide[data-appearance='lines'] .grid-guide__column > span,
.grid-guide[data-appearance='lines'] .grid-guide__legend,
.grid-guide[data-appearance='lines'] .grid-guide__item,
.grid-guide[data-appearance='lines'] .grid-guide__line { display: none; }