/* ════════════════════════════════════════════════════════════════════
   Command Palette (⌘K) — Aurora-Refactor 2026-05-28
   Tick-Corner-Frame · fa-kbd Legend · Aurora Hit-Highlight · fa-status-pill
   Source: design-system artifact. The app's markup uses the .command-palette-*
   names, styled together with the canonical .fa-cmdp* selectors.
   ════════════════════════════════════════════════════════════════════ */

/* ── Backdrop ─────────────────────────────────────────────────────── */
.command-palette-modal {
    position: fixed; inset: 0;
    background: rgb(10, 14, 26, 0.62);
    backdrop-filter: blur(6px);
    display: none;
    align-items: flex-start; justify-content: center;
    padding-top: 12vh;
    z-index: var(--z-command);
    transition: opacity 0.18s var(--ease-out);
}
.command-palette-modal.command-palette-open { display: flex; }

/* ── Container ────────────────────────────────────────────────────── */
.command-palette-container {
    width: min(94%, 720px); max-height: 80vh;
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border)); /* Kanon H4 */
    border-radius: var(--r-2xl);
    box-shadow:
      0 24px 60px rgb(0, 0, 0, 0.55),
      0 0 0 1px color-mix(in oklab, var(--primary) 14%, transparent); /* Kanon H5: kein Halo */

    display: flex; flex-direction: column;
    overflow: hidden;
    font-family: var(--font-sans);
    animation: fa-cmdp-in 0.16s var(--ease-out);
}

@keyframes fa-cmdp-in {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Header (Search + Legend) ──────────────────────────────────────── */
.command-palette-search {
    display: grid; grid-template-columns: 1fr auto; gap: 18px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, transparent) 0%, transparent 100%) /* Kanon H4 */,
      var(--surface);
    position: relative;
}
/* App markup: icon | input | ESC hint in one row */
.command-palette-search {
    display: flex; align-items: center; gap: 12px;
}
.command-palette-search label { flex: 1; margin: 0; display: flex; }
.command-palette-search::after {
    content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent); /* Kanon H4 */
    border-radius: 2px;
}

.command-palette-search-icon {
    width: 18px; height: 18px; color: var(--primary);
    flex-shrink: 0;
}
.command-palette-input {
    flex: 1; border: 0; outline: 0;
    background: transparent; color: var(--fg);
    font: 500 15px var(--font-sans);
}
/* The whole header is the field (accent underline); no second ring on the input */
.command-palette-search .command-palette-input:focus,
.command-palette-search .command-palette-input:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
}
.command-palette-input::placeholder { color: var(--fg-3); }

/* ── Results ──────────────────────────────────────────────────────── */
.command-palette-results {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 14px 14px 8px;
}
.command-category { margin-bottom: 12px; }
.command-category:last-child { margin-bottom: 0; }
.command-category-label {
    font: 700 10.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg);
    padding: 0;
}
/* ── Item ─────────────────────────────────────────────────────────── */
.command-item {
    display: grid; grid-template-columns: 36px 1fr auto;
    gap: 12px; align-items: center;
    padding: 9px 12px;
    border-radius: var(--r-md);
    text-decoration: none; color: var(--fg);
    cursor: pointer;
    transition: background 0.12s var(--ease-out),
                transform 0.12s var(--ease-out),
                box-shadow 0.12s var(--ease-out);
    position: relative;
    border: 0;
}
.command-item::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
    background: var(--primary) /* Kanon H4 */;
    border-radius: 1px;
    opacity: 0; transition: opacity 0.12s var(--ease-out);
}
.command-item:hover,
.command-item.selected {
    background: color-mix(in oklab, var(--primary) 10%, transparent);
    transform: translateX(2px);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent); /* Kanon H5 */
    border-color: transparent;
}
.command-item:hover::before,
.command-item.selected::before { opacity: 1; }

.command-item-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--primary) 15%, transparent);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
    font-size: 16px;
}
.command-item-icon .fa-icon { width: 16px; height: 16px; }
.command-item:hover .command-item-icon,
.command-item.selected .command-item-icon {
    background: color-mix(in oklab, var(--primary) 28%, transparent);
}

.command-item-content { min-width: 0; }
.command-item-label {
    font: 600 14px var(--font-sans); color: var(--fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Alva peeks from the top-right corner of the palette */
.command-palette-container { position: relative; }
.command-palette-alva {
    position: absolute; top: 14px; right: 16px; z-index: 1;
    opacity: 0.6;
    pointer-events: none;
}
.command-palette-alva ~ .command-palette-search { padding-right: 52px; }

.hidden { display: none !important; }

/* ── Hit-Highlight (Aurora-tint, NOT amber) ────────────────────────── */
.command-palette-results mark {
    background: color-mix(in oklab, var(--primary) 20%, transparent); /* Kanon H4 */
    color: var(--primary-strong);
    padding: 0 3px; border-radius: 3px;
    font-weight: 600;
}

/* ── Status meta pill ─────────────────────────────────────────────── */
/* ── No results ───────────────────────────────────────────────────── */
.command-palette-no-results {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 48px 24px; text-align: center;
    color: var(--fg-3);
}
.command-palette-no-results i {
    width: 48px; height: 48px;
    color: var(--fg-3); opacity: 0.4;
    margin-bottom: 16px;
}
.command-palette-no-results p {
    font: 600 16px var(--font-sans); margin: 0 0 4px;
    color: var(--fg-2);
}
.command-palette-no-results small {
    font: 400 13px var(--font-sans); color: var(--fg-3);
}

/* ── Footer ───────────────────────────────────────────────────────── */
.command-palette-footer {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 18px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
/* Legacy footer shortcuts row → render via fa-kbd inline */
.command-palette-shortcuts {
    display: flex; gap: 18px;
    font: 500 11.5px var(--font-mono); color: var(--fg-3);
}
.command-palette-shortcuts kbd,
.command-palette-hint {
    /* Use fa-kbd styling */
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: 600 10.5px var(--font-mono);
    color: var(--fg-2);
    line-height: 1;
}

/* ── Scrollbar inside results ─────────────────────────────────────── */
.command-palette-results::-webkit-scrollbar { width: 8px; }
.command-palette-results::-webkit-scrollbar-track { background: transparent; }
.command-palette-results::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 4px;
}
.command-palette-results::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .command-palette-container {
        width: calc(100vw - 32px);
        max-height: 84vh;
    }
    .command-palette-modal { padding-top: 8vh; }
    .command-palette-search { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .command-palette-container { animation: none; }
    .command-item { transition: none; }
    .command-item:hover,
    .command-item.selected { transform: none; }
}
/* Search results inside the one overlay (UI wave G): second line + match marker */
.command-item-description {
    display: block; font: 400 12px var(--font-sans); color: var(--fg-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.command-item mark { background: var(--primary-tint); color: inherit; padding: 0; }