/* ============================================================
   RECALL — command palette (Cmd/Ctrl-K)
   Centered-top overlay, themes via app CSS custom properties.
   z-index 80+ (above modals 60-70, focusExit 60).
   ============================================================ */

.palette-scrim{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center;
  padding:12vh 1rem 1rem;
  animation:paletteScrimIn .14s ease both;
}

.palette-panel{
  width:100%; max-width:560px;
  background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2);
  border-radius:14px;
  box-shadow:var(--shadow, 0 18px 50px -18px rgba(0,0,0,.8));
  overflow:hidden;
  display:flex; flex-direction:column;
  animation:palettePanelIn .16s cubic-bezier(.2,.7,.3,1) both;
}

.palette-input{
  width:100%;
  background:transparent;
  border:none; outline:none;
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:1.05rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line);
}
.palette-input::placeholder{ color:var(--ink-faint); }

.palette-list{
  list-style:none; margin:0;
  padding:.4rem;
  max-height:46vh; overflow-y:auto;
}

.palette-item{
  display:block;
  padding:.55rem .7rem;
  border-radius:8px;
  color:var(--ink-dim);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:.95rem;
  cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.palette-item.is-active{
  background:color-mix(in srgb, var(--amber) 12%, transparent);
  color:var(--amber);
}

.palette-empty{
  padding:.7rem;
  color:var(--ink-faint);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:.9rem;
  text-align:center;
}

.palette-hint{
  padding:.55rem .9rem;
  border-top:1px solid var(--line);
  color:var(--ink-faint);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.02em;
}

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

/* reduced-motion: no transform/opacity animation */
.palette-scrim.no-anim,
.palette-scrim.no-anim .palette-panel{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .palette-scrim, .palette-panel{ animation:none; }
}