/* Copyright (c) 2026 Goldeneye Technologies LLC. All rights reserved. */ /* Keyboard-shortcuts cheatsheet overlay (Phase 0 discoverability). Built in JS by static/js/help/shortcuts.js and appended to . Mirrors the chart modal conventions in content_chart.css: fixed full-screen backdrop, centered elevated modal, z-index above Leaflet controls (cap 1000) and the side nav. `float: none` guards exist because of the project-wide `div { float: left }` landmine the flex layout otherwise trips. Tokens from tokens.css. */ #shortcuts_overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.45); align-items: center; justify-content: center; } #shortcuts_overlay.shortcuts_open { display: flex; } #shortcuts_modal { display: flex; flex-direction: column; float: none; width: 70vw; max-width: 720px; max-height: 85vh; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } #shortcuts_header { display: flex; float: none; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-bg-muted); } #shortcuts_title { float: none; margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); } #shortcuts_close { float: none; font-family: inherit; font-size: var(--font-size-lg); line-height: 1; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); cursor: pointer; } #shortcuts_close:hover { background: var(--color-bg-hover); } #shortcuts_body { float: none; overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-4); /* Two columns of groups on wide modals; collapses to one when narrow. */ column-width: 280px; column-gap: var(--space-6); } .shortcuts_group { float: none; break-inside: avoid; margin-bottom: var(--space-4); } .shortcuts_group_title { float: none; margin: 0 0 var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .shortcuts_list { float: none; } .shortcuts_row { display: flex; float: none; align-items: baseline; gap: var(--space-3); padding: var(--space-1) 0; } .shortcuts_key { float: none; flex: 0 0 auto; min-width: 2.4em; text-align: center; font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text); background: var(--color-bg-muted); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 2px var(--space-2); } .shortcuts_desc { float: none; font-size: var(--font-size-sm); color: var(--color-text); }