/* ==========================================================================
   ux_palette.css — командна палітра (Ctrl+K / Cmd+K), see js/palette.js.
   The overlay itself reuses .modal-overlay / .modal-card from style.css
   (same entrance animation, same backdrop, same dark/light tokens) — every
   rule below only styles the palette-specific parts (search row, item list,
   group headers, keyboard-hint footer) built inside that card. All colors
   come from the shared CSS variables defined in style.css's :root /
   :root[data-theme="light"] — nothing here is hardcoded, so it already
   matches whichever theme is active.
   ========================================================================== */

/* Palette sits nearer the top of the viewport (like every other command
   palette) instead of dead-center, and always renders above every other
   overlay in the app (.modal-overlay is z-index:90, onboarding is 95). */
#paletteOverlay{
  align-items: flex-start;
  padding-top: 12vh;
  z-index: 300;
}
@media (max-width: 640px){
  #paletteOverlay{ align-items: stretch; padding: 0; }
}

.sp-card{
  max-width: 560px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: min(64vh, 520px);
  overflow: hidden;
}
@media (max-width: 640px){
  .sp-card{ max-width: none; max-height: 100vh; border-radius: 0; }
}

.sp-input-row{
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  flex: none;
}
.sp-search-ic{
  width: 18px; height: 18px; flex: none;
  color: var(--text-mute);
  display: flex;
}
.sp-input{
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: 600 var(--fs-15)/1.4 var(--sans);
}
.sp-input::placeholder{ color: var(--text-mute); font-weight: 500; }

.sp-list{
  overflow-y: auto;
  padding: 8px;
  flex: 1 1 auto;
}
.sp-group{
  font: 700 var(--fs-11)/1 var(--sans);
  color: var(--text-mute);
  padding: 12px 10px 6px;
}
.sp-group:first-child{ padding-top: 6px; }

.sp-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: 600 var(--fs-13)/1.4 var(--sans);
  text-align: left;
  cursor: pointer;
}
.sp-item-ic{
  flex: none;
  width: 18px; height: 18px;
  display: flex;
  color: var(--text-dim);
}
.sp-item-label{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-item-hint{
  flex: none;
  font: 600 var(--fs-11)/1 var(--mono);
  color: var(--text-mute);
}
.sp-item:hover{ background: var(--panel-2); }
.sp-item.active{
  background: var(--grad-brand-soft);
  color: var(--text);
}
.sp-item.active .sp-item-ic{ color: var(--brand-ink); }

.sp-empty{
  padding: 30px 18px;
  text-align: center;
  color: var(--text-mute);
  font: 600 var(--fs-13)/1.4 var(--sans);
}

.sp-foot{
  flex: none;
  display: flex;
  gap: var(--sp-16);
  padding: 9px 18px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-mute);
  font: 600 var(--fs-11)/1 var(--sans);
}
.sp-key{
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-right: 4px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--panel-2);
  font: 700 var(--fs-10)/1.4 var(--mono);
  color: var(--text-dim);
  text-align: center;
}