/* A PALETA (⌘K) — só tokens de `tokens.css`; não depende de `app.css` nem
   dos CSS dos apps, porque é carregada sobre os três. */

.paleta{padding:0;border:0;background:transparent;color:var(--ink);
        width:min(640px,92vw);margin:10vh auto 0}
.paleta::backdrop{background:rgba(27,36,48,.45)}
.paleta-caixa{background:var(--surface);border:1px solid var(--border);
              border-radius:var(--radius-lg);box-shadow:var(--sombra-3);overflow:hidden;
              font-family:var(--font-ui);font-size:var(--text-base);color:var(--ink);
              text-align:left}

.paleta-campo{display:flex;align-items:center;gap:var(--space-2);
              padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.paleta-campo input{flex:1 1 auto;min-width:0;font:inherit;font-size:var(--text-md);
                    border:0;outline:0;background:transparent;color:var(--ink);
                    padding:var(--space-1) 0}
.paleta-campo input::placeholder{color:var(--muted)}
.paleta-campo input::-webkit-search-cancel-button{display:none}
.paleta kbd{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1;
            padding:3px 6px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
            background:var(--surface-3);color:var(--muted);white-space:nowrap}

.paleta-lista{list-style:none;margin:0;padding:var(--space-2) 0;
              max-height:min(60vh,440px);overflow-y:auto}
.paleta-lista:empty{display:none}
.paleta-grupo{padding:var(--space-3) var(--space-4) var(--space-1);
              font-size:var(--text-xs);font-weight:var(--fw-semibold);
              letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.paleta-item{display:flex;flex-direction:column;gap:2px;cursor:pointer;
             padding:var(--space-2) var(--space-4);
             border-left:var(--rib-width) solid transparent}
.paleta-item[aria-selected="true"]{background:var(--accent-weak);border-left-color:var(--accent)}
.paleta-item .rotulo{font-weight:var(--fw-semibold);color:var(--ink);line-height:var(--lh-snug)}
.paleta-item .detalhe{font-size:var(--text-sm);color:var(--ink-2);
                      font-variant-numeric:tabular-nums;line-height:var(--lh-snug)}

/* "e mais N nesta tela — refine o termo": não é opção, é aviso. */
.paleta-nota{padding:var(--space-1) var(--space-4) var(--space-2);
             font-size:var(--text-sm);color:var(--muted)}

.paleta-estado{margin:0;padding:var(--space-3) var(--space-4);
               font-size:var(--text-sm);color:var(--muted)}
.paleta-estado:empty{display:none}

/* A linha achada "nesta tela": o `paleta.js` rola até ela e põe a classe por
   2 s. `outline` e não `background`: a linha de uma grade zebrada já tem cor,
   e a moldura aparece em qualquer uma. */
.paleta-achado{outline:2px solid var(--accent);outline-offset:-2px;
               background:var(--accent-weak);
               transition:background var(--dur-2) var(--ease)}
.paleta-achado:focus{outline:2px solid var(--accent);outline-offset:-2px}

/* O botão que abre a paleta. `[data-paleta-botao]` recebe a classe pelo JS;
   fora dele o elemento fica com a cara do app em que está. */
.paleta-botao{display:inline-flex;align-items:center;gap:var(--space-2);
              font:inherit;font-family:var(--font-ui);font-size:var(--text-sm);
              font-weight:var(--fw-medium);line-height:1;
              padding:6px 10px;min-height:32px;border:1px solid var(--contorno);
              border-radius:var(--radius);background:var(--surface);color:var(--ink-2);
              cursor:pointer;text-decoration:none;white-space:nowrap;
              transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
                         color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.paleta-botao kbd{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1;
                  padding:2px 5px;border:1px solid var(--border);border-radius:var(--radius-sm);
                  background:var(--surface-3);color:var(--muted)}
.paleta-botao:hover{background:var(--surface-2);border-color:var(--ink-2);color:var(--ink)}
.paleta-botao:focus-visible{outline:none;box-shadow:var(--anel-foco)}

/* No hub: um campo largo, no lugar onde a pessoa procuraria uma busca. */
.paleta-botao-hub{width:100%;max-width:560px;justify-content:flex-start;
                  padding:var(--space-3) var(--space-4);min-height:44px;
                  font-size:var(--text-base);margin:0 0 var(--space-6);
                  box-shadow:var(--sombra-1)}
.paleta-botao-hub kbd,.paleta-botao-hub .paleta-botao-texto+kbd{margin-left:auto}

/* Nos cabeçalhos dos apps: empurrado para a direita da barra. */
.menu-app .paleta-botao{margin-left:auto;align-self:center}
.compbar .paleta-botao,.topo .paleta-botao{align-self:center}
.menu-topo .paleta-botao{width:100%;justify-content:space-between;margin-top:var(--space-2)}
:root[data-menu=recolhido] .menu-topo .paleta-botao{display:none}

@media (prefers-reduced-motion: no-preference){
  .paleta[open] .paleta-caixa{animation:paleta-surgir var(--dur-2) var(--ease) both}
}
@keyframes paleta-surgir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}