/* ⌘K: a solid panel over a scrim, as Baretext's palette. */

.dr-scrim { position: absolute; inset: 0; background: var(--color-scrim); }
.dr-palette-layer { position: fixed; inset: 0; z-index: 30; }

.dr-palette {
  position: absolute;
  top: var(--palette-top);
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(var(--palette-w), calc(100% - 2 * var(--space-4)));
  max-height: var(--palette-max-h);
  translate: -50% 0;
  background: var(--color-popover);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  color: var(--color-text-dim);
  overflow: hidden;
}
.dr-palette-input {
  flex: none;
  height: var(--palette-input-h);
  padding: 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-popover-border);
  background: transparent;
  font-size: var(--text-name);
  color: var(--color-text);
}
.dr-palette-input::placeholder { color: var(--color-text-dimmer); }
.dr-palette-list { overflow: auto; padding: var(--popover-pad); }
.dr-palette-group + .dr-palette-group { margin-top: var(--space-2); }
.dr-palette-group-label { padding: var(--space-1) var(--space-3); font-size: var(--text-label); color: var(--color-text-dimmer); text-transform: uppercase; letter-spacing: 0.08em; }
.dr-palette-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--palette-row-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text);
  cursor: pointer;
}
.dr-palette-item .dr-icon { color: var(--color-text-dimmer); }
.dr-palette-item[aria-selected='true'] { background: var(--color-popover-active); }
.dr-palette-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-palette-detail { flex: none; font-size: var(--text-small); color: var(--color-text-dimmer); }
.dr-palette-empty { margin: 0; padding: var(--space-4); color: var(--color-text-dimmer); text-align: center; }

@container app (max-width: 720px) {
  .dr-palette { top: var(--space-4); max-height: calc(100% - 2 * var(--space-4)); }
}