/* The command palette (web-core/palette.view.tsx). Logical properties only, so RTL needs nothing extra. */
.palette-kbd{display:inline-flex;align-items:center;gap:.125rem;padding-inline:.375rem;border:1px solid var(--bs-border-color);border-radius:.25rem;font:500 .75rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--bs-fg-2);background:var(--bs-bg-2)}
.palette-trigger{display:inline-flex;align-items:center;gap:.5rem}
.palette-trigger .palette-kbd,.palette-trigger-label{display:none}
@media (min-width:992px){.palette-trigger .palette-kbd,.palette-trigger-label{display:inline-flex}}

.palette{inline-size:min(40rem,calc(100vw - 1.5rem));max-block-size:min(70vh,36rem);margin-block-start:10vh;padding:0;border:1px solid var(--bs-border-color);border-radius:.75rem;background:var(--bs-bg-body);color:var(--bs-fg-body);box-shadow:0 1rem 3rem rgb(0 0 0 / .25);overflow:hidden}
.palette[open]{display:flex;flex-direction:column}
.palette::backdrop{background:rgb(0 0 0 / .4)}
.palette-search{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-block-end:1px solid var(--bs-border-color);color:var(--bs-fg-2)}
.palette-input{flex:1;min-inline-size:0;border:0;outline:0;background:transparent;color:var(--bs-fg-body);font-size:1rem}
.palette-input::-webkit-search-cancel-button{display:none}
.palette-results{overflow-y:auto;overscroll-behavior:contain;padding:.25rem}
.palette-heading{padding:.5rem .75rem .25rem;font-size:.75rem;font-weight:600;color:var(--bs-fg-2);text-transform:uppercase}
.palette-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;inline-size:100%;padding:.5rem .75rem;border:0;border-radius:.5rem;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer}
.palette-item[aria-selected="true"]{background:var(--bs-bg-3);outline:2px solid var(--bs-primary-base);outline-offset:-2px}
.palette-title{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-title mark{padding:0;background:transparent;color:var(--bs-primary-base);font-weight:600}
.palette-hint{flex:none;font-size:.75rem;color:var(--bs-fg-2)}
.palette-empty{padding:1.5rem;text-align:center;color:var(--bs-fg-2)}

@media (prefers-reduced-motion:no-preference){
  .palette[open]{animation:palette-in .12s ease-out}
  @keyframes palette-in{from{opacity:0;transform:translateY(-.5rem)}}
}