/* SLMDiagBorders.css Global diagnostic border overlay -- activated by slm-diag-borders class on . Toggle via admin button in TopMenu. Zero per-page customization needed for V3 components. Blue dashed = flex container bars (tagged with diag-bar class) Red solid = every V3 field component (automatic -- no per-page markup) Amber solid = V3 input-wrap internals Green dashed = V3 actions container */ /* ── Container bars (pages add diag-bar class to flex row divs) ── */ .slm-diag-borders .diag-bar { border: 2px dashed rgba(0, 120, 215, 0.5); padding: 4px; border-radius: 4px; } /* ── V3 field components (automatic -- every slm-v3-field on any page) ── */ .slm-diag-borders .slm-v3-field { outline: 2px solid rgba(220, 50, 50, 0.5); outline-offset: -1px; } /* ── V3 input-wrap internals ── */ .slm-diag-borders .slm-v3-field__input-wrap { outline: 1px solid rgba(180, 120, 0, 0.35); outline-offset: -1px; } /* ── V3 actions container ── */ .slm-diag-borders .slm-v3-field__actions { outline: 1px dashed rgba(50, 180, 50, 0.4); outline-offset: -1px; } /* ── V3 resize-wrap ── */ .slm-diag-borders .slm-v3-field__resize-wrap { outline: 1px dashed rgba(220, 50, 50, 0.4); outline-offset: -1px; } /* ── V1 field components (bonus -- also outlines legacy fields) ── */ .slm-diag-borders .slm-field { outline: 2px solid rgba(180, 50, 220, 0.4); outline-offset: -1px; }