/* Command Palette (Ctrl+K) */
#command-palette {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* No backdrop-filter. (cortex-i6ewnoc)

       This was argued as a possible exception — a transient modal is not a
       scrolling surface, which is the ground the login page keeps its frosted
       treatment on. Measured on /domains in the sandbox, the exception does
       not hold: open() sets display:flex and nothing else, body and html both
       stay overflow:visible, and the page scrolls normally underneath (0 ->
       500px with the palette open). So a 1280x720 fixed blurred layer IS
       being re-rasterised on scroll — the exact cost the budget was written
       against, not the static case the login exception describes.

       The rgba(0,0,0,0.4) scrim already does the recede job on its own; the
       blur was decoration stacked on top of a sufficient treatment. Removed
       rather than compensated for, and rather than adding a scroll lock to
       preserve it — locking scroll would be new behaviour bolted on to keep
       a decorative layer alive. */
    background: rgba(0, 0, 0, 0.4);
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 140px);
}

.cp-dialog {
    width: 100%;
    max-width: 560px;
    margin: 0 1rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    /* Was `0 16px 70px rgba(0, 0, 0, 0.2)`. The thing being depicted is an
       occlusion cast — the dialog is an opaque plate lifted over the scrim, so
       what darkens behind it is light the plate blocks. That falloff does not
       change when the light rotates about the axis, so the 16px drop was not
       carrying it; the drop was a directional source, which the axial rule
       does not allow. Reworked into the deepest shipped zero-offset cast pair
       rather than mechanically de-offset.

       Kept local rather than deleted: at pin 0a2251b Evident ships no modal
       recipe (no .ev-modal / .ev-dialog / .ev-overlay), and .ev-selector__popover
       states it is "never a modal", so a modal is still an unowned material and
       this rule has nothing to fall through to. Not a structural edge either —
       no material is removed on the dialog's underside.

       Cast only. The nearest shipped analogue, .ev-menu-panel, precedes this
       same pair with --ev-shoulder-lite/--ev-shoulder-2, but those are a plate's
       own edge wash and were rendered and rejected here: the light shoulder is
       invisible against this dialog's near-white --surface, and .cp-dialog is
       overflow:hidden around a full-bleed input row, so an inset wash rides
       across a child rather than reading as the plate's own edge. Matches the
       app's already-ported floating plates (.year-dropdown). (cortex-jlqcdpx) */
    box-shadow:
        var(--ev-contact-2),
        var(--ev-ambient-2);
    overflow: hidden;
    /* The palette remains local because Evident has no modal recipe, but its
       fabrication story still applies: this is a rigid, discrete plate rising
       above the bench. Contact/ambient depth 1 -> 2 describes that lift while
       opacity supports the reveal. A centered overlay has no honest source
       direction, so translation would invent one; scaling would read as the
       metal inflating. Evident's global motion gate snaps this animation to its
       settled state when reduced motion is requested. (cortex-4ab0kmi) */
    animation: cp-rise-in 0.12s ease;
}

@keyframes cp-rise-in {
    from {
        opacity: 0;
        box-shadow:
            var(--ev-contact-1),
            var(--ev-ambient-1);
    }
    to {
        opacity: 1;
        box-shadow:
            var(--ev-contact-2),
            var(--ev-ambient-2);
    }
}

.cp-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.cp-input-wrapper .bi-search {
    /* Icon glyph, not prose — the one --text-faint consumer in this file that keeps
       the rung after its NON-TEXT demotion (cortex-httytej). Bound by WCAG 1.4.11
       (3:1), not 1.4.3. Everything else here moved to --text-dim. */
    color: var(--text-faint);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cp-input-wrapper input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 14px 12px;
    font-size: 1rem;
    background: transparent;
    color: var(--text-strong);
}

.cp-input-wrapper input::placeholder {
    color: var(--text-dim);
}

.cp-kbd {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: var(--bs-font-monospace);
}

.cp-results {
    max-height: min(50vh, 400px);
    overflow-y: auto;
    padding: 6px 0;
}

.cp-section-label {
    padding: 8px 16px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.cp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    transition: none;
}

.cp-item:hover,
.cp-item.cp-selected {
    background: var(--surface-alt);
    color: var(--text-strong);
    text-decoration: none;
}

.cp-item-icon {
    width: 20px;
    text-align: center;
    color: var(--text-dim);
    flex-shrink: 0;
    font-size: 0.95rem;
}

.cp-item.cp-selected .cp-item-icon {
    color: var(--accent);
}

.cp-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.cp-item-name strong {
    color: var(--accent);
    font-weight: 600;
}

.cp-item-category {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.cp-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.cp-loading {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-dim);
}

.cp-partial {
    margin: 8px 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.875rem;
}

@keyframes cp-spin-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cp-spin {
    display: inline-block;
    animation: cp-spin-anim 0.8s linear infinite;
    font-size: 1.2rem;
}

.cp-overflow {
    padding: 4px 16px 4px 46px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.cp-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-dim);
}

.cp-footer kbd {
    font-size: 0.65rem;
    padding: 1px 4px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    font-family: var(--bs-font-monospace);
    color: var(--text-dim);
}

/* Dark-mode treatment is handled automatically — every colour above
   references a semantic token, and tokens.css re-maps them for the
   complete dark theme family. No per-element overrides are needed. */