/* ============================================================================
   Command bar
   ----------------------------------------------------------------------------
   A native <dialog> opened with showModal(), like .ckwm-confirm: focus trapping,
   Escape and the inert backdrop are the browser's job. Everything here is the
   .card shell at overlay size, pinned near the top of the viewport because a
   list that grows downwards should not push its own input off-centre.
   ========================================================================== */

.command-bar {
    /* The UA centres a modal dialog with `margin: auto`, and the reset zeroes every
       margin — so without this it pins itself to the top-left corner. */
    margin: auto;
    margin-top: 12vh;
    padding: 0;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    width: 560px;
    max-width: calc(100vw - 40px);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.command-bar::backdrop { background: var(--backdrop); }
.command-bar[open] { animation: commandBarIn var(--transition) ease; }

.command-bar-input {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.command-bar-input i { color: var(--text-subtle); }
.command-bar-input input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-md);
}

.command-bar-verbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-8);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.command-bar-verbs:empty { display: none; }
.command-bar-verb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.command-bar-verb-active { background: var(--brand-soft); color: var(--brand-on-soft); }

.command-bar-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}
.command-bar-options:empty { display: none; }
.command-bar-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-base);
    color: var(--text-body);
    cursor: pointer;
}
.command-bar-option:hover { background: var(--surface-hover); }
.command-bar-option-selected {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
    /* The selected row is what Enter acts on, so it carries a mark that survives a
       theme with a soft brand tint that reads close to the hover state. */
    box-shadow: inset var(--border-accent-thick) 0 0 0 var(--brand);
}

.command-bar-message {
    margin: 0;
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}
.command-bar-message:empty { display: none; }

.command-bar-legend {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-8);
    border-top: var(--border-width) solid var(--border-subtle);
    background: var(--surface-alt);
    font-size: var(--text-xs);
    color: var(--text-subtle);
}
.command-bar-legend kbd {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

@keyframes commandBarIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}