/* the ⌘K palette, as Spotlight sits over a Mac: one rounded panel in the middle of the dimmed window, a large field,
   the results under it as a source list, the chosen row in the accent */
.palette-backdrop { position: fixed; inset: 0; z-index: 1100; display: flex; justify-content: center; align-items: center; padding: 24px; background: rgba(0, 0, 0, .28); }
.palette-backdrop[hidden] { display: none; }
.palette { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(460px, 100%); overflow: hidden; border-radius: 12px; background: var(--color-menu); box-shadow: var(--shadow-menu), 0 0 0 .5px var(--color-separator); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); animation: palette-in .16s ease-out; }
@keyframes palette-in { from { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .palette { animation: none; } }
.palette-field { display: flex; flex: none; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: .5px solid var(--color-separator); }
.palette-field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--color-label-secondary); stroke-width: 2; stroke-linecap: round; }
.palette-field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 17px; color: var(--color-label); }
.palette-field input::placeholder { color: var(--color-label-tertiary); }
.palette-field kbd { padding: 1px 6px; border-radius: 4px; font: inherit; font-size: 11px; color: var(--color-label-tertiary); background: var(--color-fill); }
.palette-list { flex: 1; min-height: 0; margin: 0; padding: 6px; list-style: none; overflow-y: auto; }
.palette-row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 7px; cursor: pointer; }
.palette-row.is-current { background: var(--color-accent); }
.palette-row.is-current .palette-text, .palette-row.is-current .palette-sub { color: #fff; }
.palette-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; }
.palette-icon svg { width: 15px; height: 15px; fill: none; stroke: var(--color-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.palette-icon svg .is-filled { fill: var(--color-label); stroke: none; }
.palette-row.is-current .palette-icon:not(.is-tile) svg { stroke: #fff; }
.palette-icon.is-tile { border-radius: 5px; background: var(--tint); }  /* a platform's or machine's tile, as the sidebar draws it */
.palette-icon.is-tile svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2; }
.palette-icon.is-tile svg .is-filled { fill: #fff; }
.palette-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-label); }
.palette-sub { flex: none; font-size: 12px; color: var(--color-label-tertiary); }
.palette-empty { padding: 18px; font-size: 13px; text-align: center; color: var(--color-label-tertiary); }

/* in the site's production look, as the sidebar now draws it: a white panel with the cards' 12px corners and outline, a
   calmer field, grey line symbols with no tiles, and the chosen row in a soft grey with its symbol in full ink */
.palette { background: var(--color-background); box-shadow: 0 0 0 1px var(--color-separator), 0 16px 48px rgba(0, 0, 0, .16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.palette-backdrop { background: rgba(0, 0, 0, .18); }
.palette-field { height: 48px; border-bottom-color: var(--color-separator); }
.palette-field svg { width: 15px; height: 15px; stroke-width: 1.8; stroke: var(--color-label-tertiary); }
.palette-field input { font-size: 14px; }
.palette-field kbd { border-radius: 6px; }
.palette-list { padding: 6px; scrollbar-width: none; }
.palette-list::-webkit-scrollbar { display: none; }
.palette-row { height: 32px; border-radius: var(--radius-control); }
.palette-row.is-current { background: var(--color-fill); }
.palette-row.is-current .palette-text { color: var(--color-label); }
.palette-row.is-current .palette-sub { color: var(--color-label-secondary); }
.palette-icon svg { stroke: var(--color-label-secondary); stroke-width: 1.6; }
.palette-icon svg .is-filled { fill: var(--color-label-secondary); }
.palette-row.is-current .palette-icon:not(.is-tile) svg { stroke: var(--color-label); }
.palette-icon.is-tile { background: none; }
.palette-icon.is-tile svg { width: 15px; height: 15px; stroke: var(--color-label-secondary); stroke-width: 1.6; }
.palette-icon.is-tile svg .is-filled { fill: var(--color-label-secondary); }
.palette-row.is-current .palette-icon.is-tile svg { stroke: var(--color-label); }
.palette-sub { font-size: 11px; }