/* shared/elevation.css — page-wide armed chrome for admin mode. The elevate CONTROL is the "Admin mode" item in the shared profile menu (shared/profile-menu.{js,css}); this file only styles the unmistakable "you are elevated" cues: the red viewport frame + the sticky banner. */ /* Page-wide chrome when admin mode is active. The toggle alone is easy to miss; these add an inescapable visual cue: 1. Thin red border around the entire viewport — peripheral- vision reminder regardless of which tool / scroll position. 2. Sticky banner across the top with a one-click "Drop admin" button so the user can disarm without hunting for the toggle. Both rendered ONLY when the zddc-elevate cookie is set; the shared/elevation.js init() syncs the body class on every page load and tears it down when elevation is cleared. Frame uses fixed positioning + pointer-events:none so it doesn't reflow content or steal clicks. An inset outline on was tried first but overdrew content in tools whose root layout butts right up to the viewport edge (browse split-pane, archive grid). */ body.is-elevated::after { content: ""; position: fixed; inset: 0; border: 3px solid var(--danger, #dc3545); pointer-events: none; z-index: 9200; /* above banner (9100) so the frame paints on top */ } .elevation-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.9rem; background: rgba(220, 53, 69, 0.95); color: #fff; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em; position: sticky; top: 0; z-index: 9100; /* above modal-overlay (9000) so it's never hidden */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .elevation-banner__dot { width: 0.5rem; height: 0.5rem; background: #fff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: elev-pulse 1.6s infinite; flex-shrink: 0; } @keyframes elev-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .elevation-banner__msg { flex: 1 1 auto; } .elevation-banner__off { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.7); color: #fff; padding: 0.18rem 0.65rem; border-radius: var(--radius, 4px); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; flex-shrink: 0; } .elevation-banner__off:hover { background: rgba(255, 255, 255, 0.3); }