/* SHIELD/ATLAS PHASE 2 — Navigation + Consistency overlay * UX audit items 8 (panel mutex), 10 (density modes), 12 (engagement mode). * Items 7 (global nav) and 11 (design tokens) infrastructure already exists; * this file adds only the visible behavior layer that was missing. * * Drop-in: pages opt into mutex via [data-sa-panel-group], opt into density * hiding via .sa-hide-min / .sa-hide-std classes, opt into engagement mode * via the body[data-sa-engagement="active"] state set by phase2-nav.js. */ /* ============================================================ * ITEM 10 — DENSITY MODES (Minimal / Standard / Full) * Density is set on by global-nav.js * cycleDensity(). Phase 2 binds the D key and adds visible rules. * ============================================================ */ /* MINIMAL: hide secondary chrome. Use .sa-hide-min on anything that * is decoration / hint / metadata that an operator under stress * does not need. Out of the box we hide hints and skip-nav * help labels via the JS auto-mark pass. */ :root[data-sa-density="minimal"] .sa-hide-min, :root[data-sa-density="minimal"] kbd:not(.sa-keep) { display: none !important; } /* STANDARD: hide things only useful in deep-dive (.sa-hide-std). * MINIMAL also hides .sa-hide-std (since min is a strict subset). */ :root[data-sa-density="minimal"] .sa-hide-std, :root[data-sa-density="standard"] .sa-hide-std { display: none !important; } /* FULL: reveal advanced detail via .sa-show-full (hidden in min/std). */ :root:not([data-sa-density="full"]) .sa-show-full { display: none !important; } /* Density toast — brief notification when D cycles density */ .sa-density-toast { position: fixed; top: 50px; right: 16px; background: var(--sa-surface3, #1a2233); color: var(--sa-cyan, #06b6d4); border: 1px solid var(--sa-cyan, #06b6d4); padding: 8px 14px; font-family: var(--sa-mono, monospace); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--sa-radius-sm, 4px); z-index: 99998; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease; } .sa-density-toast.open { opacity: 1; transform: translateY(0); } /* ============================================================ * ITEM 8 — PANEL MUTUAL EXCLUSION (opt-in) * Pages mark mutually exclusive panels with data-sa-panel-group="X" * (same value = same group). Phase 2 JS hides siblings on activation. * Active panel gets a visual indicator. * ============================================================ */ [data-sa-panel-group][data-sa-panel-active="true"] { border-left: 3px solid var(--sa-cyan, #06b6d4) !important; box-shadow: -3px 0 12px rgba(6, 182, 212, 0.18); } [data-sa-panel-group][data-sa-panel-hidden="true"] { display: none !important; } /* ============================================================ * ITEM 12 — ENGAGEMENT MODE (full-screen takeover for CRITICAL) * Activated by Shift+E or custom event 'sa:engagement-active'. * Hides nav chrome, scales kill-chain step nodes and action buttons, * adds a persistent ABORT button. Exits on Esc, ABORT click, or * 'sa:engagement-clear' event. * ============================================================ */ body[data-sa-engagement="active"] .sa-nav-bar, body[data-sa-engagement="active"] .sa-cost-chip, body[data-sa-engagement="active"] .sa-bottom-nav, body[data-sa-engagement="active"] .sa-tools-grid, body[data-sa-engagement="active"] .sa-left-rail { display: none !important; } /* Scale kill-chain step nodes and explicit engagement targets. * Architect-fix 2026-05-03: scoped to domain-specific kill-chain classes * (.kc-step, .kill-chain-step) and explicit opt-in via [data-sa-engage-target]. * Broad generic selectors (.btn-primary, button[onclick*="execute|engage"]) * removed — they could damage layout on screens reached during engagement * if Shift+E is fired anywhere. */ body[data-sa-engagement="active"] .kc-step, body[data-sa-engagement="active"] .kill-chain-step, body[data-sa-engagement="active"] [class*="kill-chain-step"], body[data-sa-engagement="active"] [data-sa-engage-target="step"] { min-height: 80px !important; font-size: 16px !important; padding: 16px !important; } body[data-sa-engagement="active"] .eng-opt-tile, body[data-sa-engagement="active"] [data-sa-engage-target="action"] { min-height: 60px !important; font-size: 16px !important; padding: 14px 20px !important; } /* Engagement-mode banner (top of screen, red) */ .sa-engagement-banner { position: fixed; top: 0; left: 0; right: 0; background: var(--sa-red, #ef4444); color: #fff; padding: 8px 16px; font-family: var(--sa-mono, monospace); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-align: center; text-transform: uppercase; z-index: 99996; display: none; border-bottom: 2px solid #fff; box-shadow: 0 2px 12px rgba(239, 68, 68, 0.5); } body[data-sa-engagement="active"] .sa-engagement-banner { display: block; } /* ABORT button — bottom-right, always visible in engagement, large */ .sa-abort-btn { position: fixed; bottom: 24px; right: 24px; background: var(--sa-red, #ef4444); color: #fff; border: 3px solid #fff; border-radius: 8px; padding: 16px 24px; font-family: var(--sa-mono, monospace); font-size: 18px; font-weight: 900; letter-spacing: 3px; cursor: pointer; z-index: 99997; display: none; min-height: 64px; min-width: 140px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(239, 68, 68, 0.4); animation: sa-abort-pulse 1.5s ease-in-out infinite; } body[data-sa-engagement="active"] .sa-abort-btn { display: block; } .sa-abort-btn:hover { background: #b91c1c; transform: scale(1.04); } .sa-abort-btn:focus-visible { outline: 4px solid #fff !important; outline-offset: 4px !important; } @keyframes sa-abort-pulse { 0%, 100% { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(239, 68, 68, 0.6); } 50% { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 16px rgba(239, 68, 68, 0); } } @media (prefers-reduced-motion: reduce) { .sa-abort-btn { animation: none; } .sa-density-toast { transition: none; } }