/* ========================================================= FILE: /css/fgh.debug.css FGH v2.2 — DEBUG VISUALIZATION (Collapse-Proof) Toggle: PHASE 1 NORMALIZATION: - Debug visualization now targets SEMANTIC selectors only so legacy layout IDs can be removed later without losing diagnostics. - Injection anchors remain ID-based (do not change): #post-area #comments-area ========================================================= */ /* --------------------------------------------------------- GLOBAL OUTLINES --------------------------------------------------------- */ .debug-layout * { outline: 1px dashed rgba(0, 0, 0, 0.08); } /* --------------------------------------------------------- WRAPPER (SEMANTIC) --------------------------------------------------------- */ .debug-layout .layout-frame { background: rgba(0, 0, 0, 0.04); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.14); } /* --------------------------------------------------------- ROWS (SEMANTIC) --------------------------------------------------------- */ .debug-layout .layout-row-primary, .debug-layout .layout-row-secondary { background: rgba(255, 255, 255, 0.45); } /* --------------------------------------------------------- AREAS (base tint) (SEMANTIC) --------------------------------------------------------- */ .debug-layout .panel-post { background: rgba(255, 230, 120, 0.28); } .debug-layout .panel-sidebar { background: rgba(255, 170, 80, 0.28); } .debug-layout .panel-comments { background: rgba(80, 170, 220, 0.28); } /* ========================================================= ⭐ CONTENT RAIL VISUALIZER (NON-COLLAPSING) ========================================================= */ /* Key idea: Give panels a tiny debug-only min-height so padding exists visually without affecting real layout logic. */ .debug-layout .panel-post, .debug-layout .panel-sidebar, .debug-layout .panel-comments { position: relative; /* ONLY for visualization */ min-height: 80px; } /* padding visualization */ .debug-layout .panel-post::after, .debug-layout .panel-sidebar::after, .debug-layout .panel-comments::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* shows padding vs content */ background: rgba(255, 255, 255, 0.35); background-clip: content-box; /* content rail */ box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45); } /* --------------------------------------------------------- HEADER / FOOTER PRESENCE (kept ID-based for now per plan) --------------------------------------------------------- */ .debug-layout #fgh-site-header { min-height: 120px; background: rgba(180, 180, 180, 0.3); } .debug-layout #fgh-site-footer { min-height: 100px; background: rgba(120, 120, 120, 0.3); } /* --------------------------------------------------------- INJECTION TARGETS (MUST REMAIN ID-BASED) --------------------------------------------------------- */ .debug-layout #post-area { outline: 2px solid rgba(255, 200, 0, 0.7); } .debug-layout #comments-area { outline: 2px solid rgba(0, 140, 255, 0.7); }