/* ═══════════════════════════════════════════════════════════════════════════ Command palette (Cmd/Ctrl+K) — see DESIGN.md §10.9 Portaled to . Overlay z-9000 / panel z-9001 (below toast 9999, §18). Brand-neutral tokens only → inherits all 22 themes + light/dark with no per-theme block. ═══════════════════════════════════════════════════════════════════════════ */ /* Page dim — a SIBLING of the transparent overlay (not a parent) so the panel's blur reaches real page content (the §6 stacking-context-trap rule). Mirrors the modal/cam-picker dim architecture. */ body:has(.cmdk-overlay)::before { content: ''; position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, 0.08); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); pointer-events: none; } .cmdk-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px; /* Transparent click-catcher ONLY — no backdrop-filter (would trap the panel's blur per §6); no opaque background (would hide the dimmed page). */ background: transparent; } /* Glass panel. overflow:hidden + backdrop-filter on the same element triggers a child-blur rendering bug (§6), so the blur lives on ::after at z-index:-1 (the canonical .cam-picker-modal pattern). */ .cmdk-panel { position: relative; z-index: 9001; width: 100%; max-width: 640px; max-height: 60vh; display: flex; flex-direction: column; overflow: hidden; background: transparent; border: 1px solid var(--border2); border-radius: 14px; box-shadow: var(--shadow-xl); animation: cmdkPanelIn 0.16s cubic-bezier(0.16, 1, 0.3, 1); } .cmdk-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--modal-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; } /* Top-edge accent shine (matches .cam-picker-modal::before / .header-popover). */ .cmdk-panel::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent); pointer-events: none; z-index: 1; } /* Transform-ONLY entrance (no opacity fade): the frosted-glass backdrop lives on .cmdk-panel::after, so fading the panel's opacity made the page visible THROUGH the still-translucent glass for the animation's duration. Keeping the panel fully opaque means the blur is solid from the first frame — only a small slide animates in. Easing is a smooth decelerate (no overshoot → no jitter). */ @keyframes cmdkPanelIn { from { transform: translateY(-8px); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { /* No motion + no fade — appear instantly, fully solid. */ .cmdk-panel { animation: none; } } /* ── Input row ──────────────────────────────────────────────────────────── */ .cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cmdk-search-icon { color: var(--text3); flex-shrink: 0; } .cmdk-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 15px; color: var(--text); font-family: inherit; } .cmdk-input::placeholder { color: var(--text3); } .cmdk-esc-hint { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text3); background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-family: inherit; } /* ── Results list ───────────────────────────────────────────────────────── */ .cmdk-list { overflow-y: auto; padding: 6px; flex: 1; min-height: 0; } .cmdk-section { padding: 4px 0; } .cmdk-section + .cmdk-section { border-top: 1px solid var(--border); margin-top: 2px; } .cmdk-section-label { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); } .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--text); user-select: none; } .cmdk-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); } .cmdk-item-icon { flex-shrink: 0; width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--text3); } .cmdk-item.active .cmdk-item-icon { color: var(--accent); } .cmdk-item-title { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk-item-sub { flex-shrink: 0; font-size: 12px; color: var(--text3); } .cmdk-overflow { padding: 7px 10px 4px; font-size: 12px; color: var(--text3); font-style: italic; } .cmdk-empty { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--text3); } /* Visually-hidden live region (result count → screen readers). */ .cmdk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Header trigger (compact icon + ⌘K hint) ────────────────────────────── */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 7px; } .cmdk-trigger-icon { color: var(--text2); flex-shrink: 0; } .cmdk-trigger-kbd { font-size: 11px; font-weight: 600; color: var(--text3); font-family: inherit; letter-spacing: 0.02em; white-space: nowrap; } /* No touch Cmd+K → the palette is intentionally unreachable on mobile in v1. */ @media (max-width: 768px) { .cmdk-trigger { display: none; } }