/* Command palette styles.
   A separate file because hcb/flow/ carries its own token set and does not
   load style.css — the palette has to look the same there. Every token below
   has a literal fallback, so the component styles itself correctly whether or
   not the site's tokens are in scope.
*/
/* ——— COMMAND PALETTE ———
   ⌘K. On a site built by hand this is the right kind of flourish: it is
   faster than the nav for anyone who knows what they want, and it says
   something true about who built it.
   Same dark translucent material as the nav pill, so it reads as part of the
   same object rather than a widget dropped on top. */
.cmdk[hidden] { display: none; }
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 14vh 20px 20px;
}
.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cmdk-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(14, 14, 14, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--r-card, 16px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  animation: cmdk-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cmdk-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.cmdk-input {
  flex: none;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
  color: var(--text-inv, #F5F0E9);
  font-family: var(--font, 'Plus Jakarta Sans', sans-serif);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.cmdk-input::placeholder { color: var(--text-inv-mid, #6B6B6B); }
.cmdk-input:focus { outline: none; }   /* the panel itself is the focus ring */

.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.cmdk-list li.on { background: rgba(255, 255, 255, 0.07); }
.cmdk-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-inv, #F5F0E9);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-hint {
  flex: none;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-inv-mid, #6B6B6B);
}
.cmdk-list li.on .cmdk-hint { color: var(--text-muted, #A3A3A3); }
.cmdk-empty {
  padding: 24px 14px;
  font-size: 15px;
  color: var(--text-inv-mid, #6B6B6B);
  cursor: default;
}
.cmdk-foot {
  flex: none;
  display: flex;
  gap: 18px;
  padding: 12px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-inv-mid, #6B6B6B);
}
.cmdk-foot b { color: var(--text-muted, #A3A3A3); font-weight: 400; }

/* The affordance in the nav */
.cmdk-hintbtn {
  display: none;
  gap: 3px;
  /* auto absorbs the row's free space so .nav's space-between has none left
     to redistribute — see the insert comment in palette.js */
  margin-left: auto;
  margin-right: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
@media (min-width: 900px) { .cmdk-hintbtn { display: inline-flex; } }
.cmdk-hintbtn kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-inv-mid, #6B6B6B);
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 11px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cmdk-hintbtn:hover kbd { color: var(--text-inv, #F5F0E9); border-color: rgba(255, 255, 255, 0.34); }

.cmdk-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 600;
  padding: 12px 20px;
  border-radius: var(--r-pill, 100px);
  background: var(--text-inv, #F5F0E9);
  color: var(--dark, #0A0A0A);
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
  .cmdk { padding: 8vh 12px 12px; }
  .cmdk-foot { display: none; }
}