/* Overlay panel component styles (ADR-018/019). Co-located with the overlay ES modules (assets/overlay/) and enqueued site-wide alongside the overlay entry module, since the panel can be summoned on any front-end screen. Depends on terminal.css for the shared :root tokens (--amber, --bg-panel, --crt-surface-*, …); that stylesheet is the enqueue dependency, so it always cascades first. A small, JS-positioned layer summoned by hovering an in-prose archive link or clicking a Star Map body. Its width is fixed and its height follows the content up to a JS-set max-height. Panels stack, each carrying its own amber corner accent, and sit above the picker modal (10001) and the fallback-fullscreen Star Map (10000). Built and driven by assets/overlay/. */ .lk-overlay-layer { position: fixed; inset: 0; z-index: 10002; pointer-events: none; /* the layer is inert; only the panels capture input */ } /* While a panel is open the background page is made inert to the pointer — links underneath get no hover, the cursor stays a plain arrow, and a click anywhere outside a panel only dismisses the stack (handled on the document) instead of navigating. The trick keeps reading possible: the *scroll containers* stay interactive while their contents go pointer-events:none, so the wheel still targets the scroller (the note keeps scrolling) while the links beneath it get no hover, no cursor and no click-through. Driven by the `hmb-overlay-open` class the stack toggles on ; the panels live outside .lk-screen, so they are unaffected and stay live. */ html.hmb-overlay-open .lk-screen * { pointer-events: none; } html.hmb-overlay-open .lk-main, html.hmb-overlay-open .lk-rail { pointer-events: auto; cursor: default; } /* The Star Map is the exception: a body panel is summoned *from* the map, so the map itself must stay live underneath — pan, zoom, and clicking another body (which closes this panel and opens the next). Only the page chrome around it goes inert. */ html.hmb-overlay-open .lk-starmap, html.hmb-overlay-open .lk-starmap * { pointer-events: auto; } /* Dimmed, faintly blurred backdrop while any panel is open, so the readout reads as a focused console layer above a powered-down page rather than a flat popup. Stays click-through (pointer-events: none): outside-click dismissal is handled on the document, so the scrim is purely atmosphere. */ .lk-overlay-layer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 0%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)); backdrop-filter: brightness(0.9); opacity: 0; transition: opacity 160ms ease-out; pointer-events: none; } .lk-overlay-layer.is-active::before { opacity: 1; } .lk-overlay { position: fixed; display: flex; flex-direction: column; /* Width is fixed; height follows the content up to the JS-set max-height. */ background: color-mix(in srgb, var(--bg-panel), transparent); border: 1px solid var(--amber-dim); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 30px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 176, 0, 0.16); pointer-events: auto; overflow: hidden; /* clip the scanline wash to the panel */ backdrop-filter: blur(5px); /* Grow out of the keyword the title is pinned over. */ transform-origin: top left; animation: lk-overlay-in 140ms cubic-bezier(0.2, 0.8, 0.3, 1); } /* Amber corner bracket, like .lk-panel. */ .lk-overlay::before { content: ""; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); pointer-events: none; z-index: 1; } /* Faint CRT scanline wash across the whole panel. */ .lk-overlay::after { content: ""; position: absolute; inset: 0; background: var(--crt-surface-scan); pointer-events: none; } @keyframes lk-overlay-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .lk-overlay-bar { display: flex; align-items: center; justify-content: space-between; padding: 0; height: 32px; border-bottom: 1px dashed var(--border); position: relative; } .lk-overlay-title { color: var(--amber); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 2px; font-weight: 600; padding: 8px 10px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A linked title (note previews) carries the record route, so a click expands the preview into its full page; it stays in the amber title style, no underline. */ .lk-overlay-title a { color: inherit; text-decoration: none; } .lk-overlay-title a:hover, .lk-overlay-title a:focus-visible { outline: none; text-shadow: 0 0 8px rgba(255, 176, 0, 0.6); } /* Title-bar controls: the caller's action buttons (e.g. the Star Map's "focus"), then the close control, kept together at the bar's right edge. */ .lk-overlay-controls { flex: none; display: flex; align-items: center; gap: 0; height: 32px; } .lk-overlay-close, .lk-overlay-action { flex: none; background: transparent; color: var(--amber-dim); font-family: var(--font-mono); font-size: 0.9rem; line-height: 1; cursor: pointer; border: 0; border-left: 1px solid var(--border); padding: 0; text-align: center; height: 32px; min-width: 32px; line-height: 32px; } .lk-overlay-close:hover, .lk-overlay-close:focus-visible, .lk-overlay-action:hover, .lk-overlay-action:focus-visible { outline: none; color: var(--amber); background: rgba(255, 176, 0, 0.15); } /* A toggle action that is currently on (e.g. the body that is the camera's rotation center) reads as lit, so the panel shows the toggle's state at a glance. */ .lk-overlay-action.is-active { color: #b07cff; background: rgba(176, 124, 255, 0.16); } /* The body owns its own dark CRT surface; it is deliberately *not* .lk-output, so it carries no inner amber border (the panel already has one). */ .lk-overlay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; background: #05050520; background-image: var(--crt-surface-sheen); font-size: 0.86rem; } .lk-overlay-status { color: var(--muted); font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; } .lk-overlay-status.lk-error { color: var(--danger); } /* Help reference (console "help"): section headers reuse the status style; give each group above the first some breathing room from the rows before it. */ .lk-prose .lk-line + .lk-overlay-status { margin-top: 14px; } /* Affordance: in-prose archive links that the overlay can preview get an amber dotted underline so an operator knows a hover yields a readout. Scoped to .lk-prose to match the trigger (link lists are navigation, not previews). */ .lk-prose a[href*="?memory="] { text-decoration-style: dotted; cursor: help; } /* A ship readout's From/To endpoint: a button styled as the value text, with the amber dotted underline that marks it openable (mirrors the prose-link cue). It opens the endpoint's own readout and offers a focus-jump to it. */ .lk-loc-link { appearance: none; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: inherit; text-decoration: underline dotted var(--amber-faint); text-underline-offset: 2px; cursor: pointer; transition: color 0.12s, text-decoration-color 0.12s; } .lk-loc-link:hover, .lk-loc-link:focus-visible { outline: none; color: var(--amber); text-decoration-color: var(--amber); } @media (prefers-reduced-motion: reduce) { .lk-overlay { animation: none; } .lk-overlay-layer::before { transition: none; } }