/* ============================================================================
   Command palette. Built on the borealis.css tokens, so it follows the theme.
   ========================================================================= */

.sasp {
  position: fixed;
  inset: 0;
  z-index: 9000;
}
.sasp[hidden] { display: none; }
html.sasp-open { overflow: hidden; }

.sasp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.62);
  backdrop-filter: blur(2px);
}

.sasp-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(620px, calc(100vw - 32px));
  margin: 12vh auto 0;
  background: var(--sas-bg-1, #101012);
  border: 1px solid var(--sas-line-strong, rgba(255, 255, 255, 0.16));
  border-radius: 16px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 4px 14px -6px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.sasp-dialog *,
.sasp-dialog *::before { box-sizing: border-box; }

/* --- field ------------------------------------------------------------- */
.sasp-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sas-line, rgba(255, 255, 255, 0.08));
}
.sasp-field > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: var(--sas-fg-3, rgba(241, 241, 242, 0.54));
  fill: none;
  stroke-width: 1.8;
}
.sasp-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sas-fg, #f1f1f2);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
}
.sasp-field input:focus { outline: none; }
.sasp-field input::placeholder { color: var(--sas-fg-3, rgba(241, 241, 242, 0.54)); }

.sasp kbd {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--sas-line, rgba(255, 255, 255, 0.08));
  border-radius: 5px;
  background: var(--sas-bg-3, #1e1e23);
  color: var(--sas-fg-3, rgba(241, 241, 242, 0.54));
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- results ----------------------------------------------------------- */
.sasp-list {
  max-height: min(52vh, 420px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}
.sasp-group {
  padding: 9px 9px 5px;
  color: var(--sas-fg-3, rgba(241, 241, 242, 0.54));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sasp-opt { margin: 0; }
.sasp-opt-link,
.sasp-opt-link:visited {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--sas-fg, #f1f1f2) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
}
.sasp-opt.is-active .sasp-opt-link {
  background: var(--sas-red-soft, rgba(193, 39, 45, 0.15));
  border-color: var(--sas-red-line, rgba(216, 56, 62, 0.55));
}
.sasp-opt-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sasp-opt-kind {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--sas-line, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  background: var(--sas-bg-2, #16161a);
  color: var(--sas-fg-3, rgba(241, 241, 242, 0.54));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sasp-status {
  margin: 0;
  padding: 14px;
  color: var(--sas-fg-3, rgba(241, 241, 242, 0.54));
  font-size: 12.5px;
  text-align: center;
}
.sasp-status[hidden] { display: none; }

/* --- footer ------------------------------------------------------------ */
.sasp-foot {
  display: flex;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid var(--sas-line, rgba(255, 255, 255, 0.08));
  background: var(--sas-bg-2, #16161a);
  color: var(--sas-fg-3, rgba(241, 241, 242, 0.54));
  font-size: 11px;
}
.sasp-foot span { display: inline-flex; align-items: center; gap: 4px; }
.sasp-foot kbd { padding: 1px 5px; font-size: 9.5px; }

@media (max-width: 520px) {
  .sasp-dialog { margin-top: 6vh; border-radius: 13px; }
  .sasp-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sasp-backdrop { backdrop-filter: none; }
}