/* Site command palette. Behavior: static/js/components/command.js and dialog.js. */

.site-command-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-height: 40px;
  padding: 0.35rem 0.7rem 0.35rem 0.9rem;
  border: 1px solid var(--site-line);
  border-radius: 999px;
  background: var(--site-paper);
  color: var(--site-muted);
  font-size: 14px;
}

.site-command-trigger:hover {
  color: var(--site-ink);
  border-color: var(--site-sage);
}

.site-command-trigger__kbd {
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--site-ink);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  padding: 0.1rem 0.35rem;
  background: var(--site-sand);
}

/* :modal matches the open top-layer state. The same fixed box has to apply
 * after close(), because leaving the top layer drops the UA dialog:modal
 * rules and the element would otherwise jump to its place at the end of the
 * page while the fade is still running. */
.site-command,
.site-command:modal {
  position: fixed;
  inset: auto;
  top: clamp(5.5rem, 14vh, 8rem);
  left: 50%;
  width: min(40rem, calc(100% - 2rem));
  max-width: 40rem;
  height: fit-content;
  max-height: min(32rem, calc(100dvh - 8rem));
  margin: 0;
  padding: 0;
  translate: -50% -0.75rem;
  scale: 1;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  background: var(--site-paper);
  color: var(--site-ink);
  box-shadow: 0 24px 48px rgb(30 36 38 / 16%);
  font-family: var(--site-sans);
  transition:
    opacity 0.16s ease,
    translate 0.16s ease,
    overlay 0.16s ease allow-discrete,
    display 0.16s ease allow-discrete;
}

.site-command[open] {
  translate: -50% 0;
  pointer-events: auto;
}

@starting-style {
  .site-command[open] {
    opacity: 0;
    scale: 1;
    translate: -50% -0.75rem;
  }
}

.site-command[open]::backdrop {
  background: rgb(30 36 38 / 45%);
}

.site-command__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.35rem 0.85rem 0.35rem 1.1rem;
  border-bottom: 1px solid var(--site-line);
}

.site-command__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--site-ink);
  font-size: 1rem;
  padding: 0.75rem 0;
}

.site-command__input:focus-visible {
  outline: none;
}

.site-command__esc {
  flex-shrink: 0;
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--site-ink);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  padding: 0.2rem 0.4rem;
  background: var(--site-sand);
}

.site-command__esc-label {
  display: none;
}

.site-command__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.35rem;
}

.site-command__heading {
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-sage);
  padding: 0.7rem 0.75rem 0.25rem;
}

.site-command__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--site-radius);
  color: var(--site-ink);
  font-size: 15px;
}

.site-command__item:hover,
.site-command__item:focus-visible {
  background: var(--site-sage-soft);
  color: var(--site-ink);
  outline: none;
}

.site-command__label {
  min-width: 0;
}

.site-command__meta {
  flex-shrink: 0;
  max-width: 42%;
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--site-body);
}

.site-command__empty {
  padding: 1.25rem 0.75rem;
  color: var(--site-muted);
  font-size: 14px;
}

.site-command__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.15rem;
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--site-line);
  font-family: var(--site-mono);
  font-size: 11px;
  color: var(--site-body);
}

.site-command__foot kbd {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  padding: 0.05rem 0.3rem;
  background: var(--site-sand);
  color: var(--site-ink);
}

@media (max-width: 1099px) {
  .site-command-trigger__kbd {
    display: none;
  }

  .site-command,
  .site-command:modal {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    translate: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .site-command[open] {
    display: flex;
    flex-direction: column;
    translate: none;
  }

  .site-command__input {
    font-size: 16px;
    padding: 0.9rem 0;
  }

  .site-command__esc {
    min-height: 44px;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-family: var(--site-sans);
    font-size: 14px;
    letter-spacing: 0;
  }

  .site-command__esc-key {
    display: none;
  }

  .site-command__esc-label {
    display: inline;
  }

  .site-command__item {
    min-height: 44px;
    align-items: center;
  }

  .site-command__foot {
    display: none;
  }
}

@starting-style {
  @media (max-width: 1099px) {
    .site-command[open] {
      translate: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-command,
  .site-command::backdrop {
    transition: none;
  }
}